Ich habe mich entschieden, es mit Webpack 2 zu versuchen. Ich versuche, js und css zu bündeln.Webpack - CSS nicht angewendet
Das Problem ist, dass CSS nicht die Elemente auf der Seite angewendet wird (es ist in der gebauten Datei vorhanden).
Dies ist die App-Struktur:
app
|-styles.css
|-app.js
build
|-bundle.js
index.html
webpack Konfigurationsdatei:
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!');
Wenn ich Befehl ausführen bauen diese Ausgabe erhalten:
[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]
Auch ich kann die CSS zu sehen ist, die in der bundle.js
exports.push([module.i, ".abc {\r\n width: 300px;\r\n height: 100px;\r\n background-color: red;\r\n}", ""]);
Datei Wenn ich CSS-Datei enthalten in HTML funktioniert es gut, also denke ich, dass es keinen Schreibfehler in CSS selbst gibt. Ich habe ziemlich viel Zeit damit verbracht, es herauszufinden. Gibt es etwas, das ich vermisse?
Dank Sie gespeichert Stunden der Suche nach mir! – arsinawaz