启用 CSS 模块时如何排除引导文件

Question

通过在我的项目中启用css-loader 的模块选项，我同时使用引导模块和CSS 模块，不幸的是css-loader 也对引导文件应用范围。

我有一个app.scss，我在其中导入所有引导 sass 文件。我将app.scss 文件导入到我的app.js 文件中：

import "./app.scss";

  { test: /\.scss$/,
    use: [
        {loader: "style-loader"},
        {
          loader: "css-loader",
          options: {
            sourceMap: true,
            modules: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]"
          }
        },
        {loader: "sass-loader"}
      ]

例如，bootstrap 的 .table 类变成了 .app__table--19A_z 之类的东西

你认为我可以如何禁用引导文件的 CSS 模块。

Answer 1

可以通过module rule.exclude完成

条件不能匹配。约定是在这里提供一个字符串或字符串数​​组，但不是强制的。

所以排除 boostrap scss 文件应该是这样的：

{
  test: /\.scss$/,
  use: ...
  exclude: [
    path.resolve(__dirname, "node_modules/bootstrap"),
  ]
}

Answer 2

这不能简单地使用exclude 来完成，因为您将引导 scss 文件导入到应用程序的 scss 文件中，只有一个入口点。

使用 :global 选择器范围也不能完全完成，但这绝对可以完成这项工作，尤其是如果您不使用 postcss。

要查看有关此主题的持续讨论，请查看此 github 问题：https://github.com/css-modules/css-modules/pull/65

Answer 3

是的，Drew2 对 githup 问题的建议非常有帮助。 添加查询以引导 css 导入路径：

import 'bootstrap/dist/css/bootstrap.css?bootstrap'
import 'bootstrap/dist/js/bootstrap'
import App from './App'

并且在 webpack.config 中使用“oneOf”作为 css 规则：

    rules: [
  ...
  {
    test: /\.(css|pcss)$/,
    oneOf: [
      {
        resourceQuery: /bootstarp/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: {
                localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },

  ...
],

OR 包含/排除：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import App from './App'


      rules: [
...
{
    test: /\.(css|pcss)$/,
    exclude: /bootstrap\/dist\/css\/bootstrap\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 1,
          modules: {
            localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
          },
          // exportOnlyLocals: false,
        },
      },
      {
        loader: 'postcss-loader',
        options: { sourceMap: true },
      },
    ],
  },

  {
    test: /\.(css|pcss)$/,
    include: /bootstrap\/dist\/css\/bootstrap\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 1,
          // exportOnlyLocals: false,
        },
      },
      {
        loader: 'postcss-loader',
        options: { sourceMap: true },
      },
    ],
  },

... ]