Javascript 网页包-未应用CSS_Javascript_Webpack_Webpack 2

Javascript 网页包-未应用CSS

javascript webpack

Javascript 网页包-未应用CSS,javascript,webpack,webpack-2,Javascript,Webpack,Webpack 2,我决定尝试一下Webpack2。我正在尝试捆绑js和css 问题是CSS没有应用于页面上的元素（它存在于构建文件中）这是应用程序结构： app |-styles.css |-app.js build |-bundle.js index.html 网页包配置文件： var path = require('path'); module.exports = { entry: './app/app.js', output: { filename: 'bu

我决定尝试一下Webpack2。我正在尝试捆绑js和css

问题是CSS没有应用于页面上的元素（它存在于构建文件中）

这是应用程序结构：

app
  |-styles.css
  |-app.js
build
  |-bundle.js
index.html

网页包配置文件：

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>

运行生成命令获取此输出时：

[0]。/app/styles.css 240字节{0}[builded][1]。/~/css-loader/lib/css-base.js 1.51 kB{0}[builded][2]。/app/app.js 148字节{0}[builded]

我还可以看到bundle.js文件中包含css

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

若我在html中包含css文件，它运行良好，所以我猜css本身并没有拼写错误。我花了很多时间想弄明白。有什么我遗漏的吗？

您正在使用

CSS加载器将CSS作为字符串加载。您还需要在导入时将CSS加载到DOM中
use: [ 'style-loader', 'css-loader' ]

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