css - ReactJS - 导入组件会破坏 webpack
问题描述
我的 ReactJS 应用默认版本运行良好。当我升级我的应用程序以创建新版本并尝试导入新组件时,它会弄乱所有样式。新组件没有任何样式元素。我觉得当我导入新组件时,webpack 不会考虑现有的 css 文件。当我在导入的组件中手动导入缺少的 css 文件时,它运行良好。
网页包: :
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
watch: true,
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module:{
loaders: [
{
test:/\.js$/,
exclude:/node_modules/,
loader: 'babel-loader',
query: {
presets:['react','es2015', 'stage-1']
}
},
{
test:/\.(s*)css$/,
use:['style-loader','css-loader', 'sass-loader'],
include: path.resolve(__dirname, 'src/css')
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
],
}
}
反应组件:
`
import React from 'react'
import Header from './Header-backupWithSignup';
import Contact from './Contact';
import SiteMap from './SiteMap';
import Sidebar from './Sidebar';
import Upgrades from './Upgrades';
import Carefree from './Carefree';
import Trails from './Trails';
import AreaMap from './AreaMap';
import Siteplan from './Siteplan';
import Features from './Features';
import HomeDetails from './HomeDetails';
import Homes from './Homes';
import '../css/Stickey.css'
import $ from 'jquery'
import BottomStickyNav from './BottomStickyNav';
import CMS from './CMS/CMS';
import ProjectTemplateService from './../services/projectTemplateServices';
import AboutService from './../services/aboutService';
import Login from './Authentication/login';
import update from 'immutability-helper';
import '../css/master.css';
`
如果我删除 import master.css 语句,那么一切都会中断。master.css 文件确实将所有其他 css 文件导入其中。
我们希望确保 webpack 用于实时重新加载/同步更新的 css,而不是在我们的页面中硬编码 css 链接内联
请帮忙。
npm 版本:6.x 节点版本:10.x 在此处附加 webpack 文件。
解决方案
推荐阅读
- ruby - 有没有办法使用 rspec-serverspec 在部署期间测试是否安装了特定版本的 java 或 tomcat?
- c# - 如何从嵌套类或结构中写入 json 格式
- sql - 使用 ASP.NET Core 从 SQL 数据库中保存/检索图像
- python - 绘制特定区域
- wordpress - 使用 Wordpress、BuddyPress 和 Mailgun,但 HTML 邮件不起作用,只有普通的,是否存在任何解决方案?
- python - 在整个 Numpy 库中读取文件
- java - 如何在 BIRT API 中设置 Excel 工作表名称?
- dafny - Dafny 迭代器:违反了前提条件和修改子句
- javascript - 在特定转换值处触发函数
- postgresql - 如何解决 org.springframework.jdbc.BadSqlGrammarException