Question

我有一个非常奇怪的问题，我创建的任何新CSS文件和我的JS代码中的import都没有添加到输出文件中。我的webpack配置被设置为将我的React组件中所需的所有CSS文件捆绑到一个名为styles.css的输出文件中。以下是我配置的相关部分：

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: ['css-loader?modules=true&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'],
        })
      },
      ...
    ],
  },
  ...
  plugins: [
    ...
    new ExtractTextPlugin('css/styles.css'),
    ...
  ],
};

此配置创建一个名为styles.css的文件，并将其放在我的输出目录中名为css的目录中。

这是一个奇怪的部分：它当前为我的代码中导入的所有文件生成散列类名，但它忽略了某些文件的类定义（在一致的基础上）。

我使用的是这些版本的软件包：

"css-loader": "^0.28.4",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",

我甚至尝试更新所有软件包，但问题仍然存在。

我尝试在生产和开发模式下在三台不同的机器上运行webpack，并始终获得相同的结果。

有什么想法吗？我在这里错过了什么吗？

Answer 1

我实际上找到了答案：我在我的webpack中使用块作为单独的入口点，但是（非常不小心）重写相同的CSS文件而不考虑不同入口点的不同需求。到目前为止，我的所有输入块都有相同的CSS规则，这就是我之前没有看到的原因。

D'哦！

Webpack CSS模块未加载新代码

1 个答案: