4
Webpack 2に試してみることにしました。私はjsとcssをバンドルしようとしています。Webpack - 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!');
私はこの出力を取得し、コマンドを構築し実行します。
[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が、私はCSSファイルが含まれている場合
exports.push([module.i, ".abc {\r\n width: 300px;\r\n height: 100px;\r\n background-color: red;\r\n}", ""]);
ファイルbundle.jsに含まれて見ることができますHTMLでそれは正常に動作するので、CSS自体にスペルミスがないと思います。私はそれを理解しようとかなりの時間を費やしました。私が行方不明のものはありますか？
時間を節約してくれてありがとう！ – arsinawaz