hom*_*mer 10 javascript webpack webpack-2
我已经决定试一试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 bytes {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[2] ./app/app.js 148 bytes {0} [built]
我也可以看到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本身没有拼写错误.我花了很多时间试图解决这个问题.有什么我想念的吗？
Sim*_*leJ 18
您正在将CSS作为字符串加载css-loader.您还需要style-loader在导入时将CSS加载到DOM中.
use: [ 'style-loader', 'css-loader' ]
| 归档时间： |
|
| 查看次数： |
2926 次 |
| 最近记录： |