如何在webpack中禁用某个文件的css模块化

Question

我需要禁用 CSS 模块仅针对一个文件。

请说明如何操作。

我有两个 Webpack 文件。

请帮忙配置我的 webpack.config.dev.js 和 webpack.config.prod.js 文件。

我按照教程 https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2 安装了 CSS 模块。

我的 Webpack 配置如下：

dev

 test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            },
          },

产品

test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: require.resolve('style-loader'),
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    minimize: true,
                    sourceMap: true,
                  },
                },

我的文件路径为'react-infinite-calendar/styles.css'。

如何添加异常处理？

提前感谢您！

- a.kozubenko

Answer 1

使用 exclude 选项：

// ...
test: /\.css$/,
exclude: /yor_file\.css$/,
// ...

- Alexandr Lazarev

---

路径应该像这样吗？// ... test: /\.css$/, exclude: /react-infinite-calendar/styles.css\.css$/, // .. - a.kozubenko

一个条件可以是一个RegExp（针对绝对路径进行测试），一个包含绝对路径的字符串，一个function(absPath): bool，或者是其中之一与“and”组合的数组。 - Alexandr Lazarev

请给我一个例子，告诉我在我的情况下应该如何操作。我是初学者。 - a.kozubenko