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

Question

在我的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取而代之的是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]'
            }
          }
        ]
      },

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

Answer 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目录（仅仅依靠规则的 test 属性来包含库的 css 文件是不够的。）一旦我有该规则排除 node_modules 文件夹，我在实际包含库的style.css文件时遇到了麻烦（可能是因为我在属性前加上了正斜杠 /