Webpack 同时使用 css 模块并导入整个 css 文件答案

【问题标题】：Webpack use both css module and import entire css fileWebpack 同时使用 css 模块并导入整个 css 文件
【发布时间】：2020-04-14 11:06:47
【问题描述】：

在我的 react 应用程序中，我有一个 Webpack 配置文件，它正在更改我的应用程序中 css 类的 localIdentName。我使用这个设置，以便我可以将 css 作为模块导入到我的 react 组件中——这个功能可以正常工作。但是，我使用的 js/npm 库需要我直接导入组件（React 应用程序）的 css。我必须使用 import "react-day-picker/lib/style.css"; 并且不能以任何其他方式导入 css。

为了实现这一点，我需要（或认为）在我的 Webpack 配置中添加另一个规则。我现有的处理我的 css 文件的规则如下：

      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          }
        ]
      },

我建议我需要一个新规则来适应添加react-day-picker/lib/style.css，但是添加这样的规则之前我现有的规则似乎与文件不匹配（我的现有/原始/第一个规则拿起react-day-picker/lib/style.css 代替）。

      // just for day picker
      {
        test: /\/react-day-picker\/lib\/style\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              // NOTE - no modules: true here!
              localIdentName: '[local]'
            }
          }
        ]
      },

Webpack 配置中的规则顺序是否与 Webpack 查找文件的顺序相同？
如何修改我的规则，以便 Webpack 提取我的文件 (react-day-picker/lib/style.css) 并允许导入它？

【问题讨论】：

标签： javascript css reactjs webpack

【解决方案1】：

为了将我现有的 css 作为模块加载而更新的规则集，但是这个库的 css 文件作为常规 css 导入如下：

      // just for day picker
      {
        test: /react-day-picker.*style\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              localIdentName: '[local]'
            }
          }
        ]
      },
      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          }
        ]
      },

我相信我之前的代码不起作用，因为我需要正确排除 node_modules 目录（仅仅依靠 rule's test property 来包含库的 css 文件是不够的。）一旦我让该规则排除了 node_modules 文件夹，我实际上在包含库的 style.css 文件时遇到了麻烦（它可能是因为我在属性前面加上了一个转发斜线/

【讨论】：