我已经决定试一试Webpack 2.我正在尝试捆绑js和css.
问题是CSS没有应用页面上的元素(它存在于构建的文件中).
这是应用程序结构：
app |-styles.css |-app.js build |-bundle.js index.html
webpack配置文件：
var path = require('path');
module.exports = {
entry: './app/app.js',output: {
filename: 'bundle.js',path: path.resolve(__dirname,'build')
},module: {
rules: [
{
test: /\.css$/,use: 'css-loader'
}
]
}
}
index.html的：
<html>
<head>
<script src="./build/bundle.js"></script>
</head>
<body>
<div class="abc"> hello </div>
</body>
app.js：
require('./styles.css');
console.log('js loaded!');
当我运行build命令获取此输出时：
[0] ./app/styles.css 240字节{0} [已建]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[2] ./app/app.js 148字节{0} [已建]
我也可以看到css包含在bundle.js文件中
exports.push([module.i,".abc {\r\n width: 300px;\r\n height: 100px;\r\n background-color: red;\r\n}",""]);
如果我在html中包含css文件它工作正常,所以我猜CSS本身没有拼写错误.我花了很多时间试图解决这个问题.有什么我想念的吗？
解决方法
您只需使用css-loader将CSS加载为字符串.您还需要
style-loader才能在导入时将CSS加载到DOM中.
use: [ 'style-loader','css-loader' ]