Webpack CSS 模块未加载新代码

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 的目录中。

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

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

"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，这就是为什么我之前没有看到它。

哦哦！

Webpack CSS 模块未加载新代码

Webpack CSS Modules Not Loading New Code

javascript

reactjs

webpack

css-modules

css-loader