Question

我决定尝试一下Webpack 2.我正在尝试捆绑js和css。

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

这是应用程序结构：

pip install ez_setup

webpack配置文件：

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

的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'
          }
      ]
   }
}

app.js：

<html>
<head>
   <script src="./build/bundle.js"></script>
</head>
<body>
    <div class="abc"> hello </div>
</body>

当我运行build命令获取此输出时：

require('./styles.css'); console.log('js loaded!');

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

[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]

如果我在html中包含css文件它工作正常，所以我猜CSS本身没有拼写错误。我花了很多时间试图解决这个问题。有什么我想念的吗？

Answer 1

您将CSS加载为仅包含css-loader的字符串。您还需要style-loader，以便在导入时将CSS加载到DOM中。

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

Webpack - CSS未应用

1 个答案: