Webpack - 未應用CSS

我已決定嘗試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是包含在bundle.js文件

exports.push([module.i, ".abc {\r\n width: 300px;\r\n height: 100px;\r\n background-color: red;\r\n}", ""]);

如果我包括CSS文件在HTML中，它工作正常，所以我猜CSS本身沒有拼寫錯誤。我花了很多時間試圖弄清楚。有什麼我失蹤？

來源

2017-02-20 homer

您正在將CSS加載爲只有css-loader的字符串。您還需要style-loader以便在導入時將CSS加載到DOM中。

use: [ 'style-loader', 'css-loader' ]

來源

2017-02-20 22:52:06 SimpleJ

謝謝您節省了幾個小時尋找我！ – arsinawaz

Webpack - 未應用CSS

回答

相關問題