Question

我通过在项目中启用css-loader的模块选项来使用bootstrap和CSS模块，不幸的是css-loader也在引导文件上应用了作用域。

我有app.scss我要导入所有bootstrap 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

使用exclude无法简单地完成此操作，因为您正在使用单个入口点将引导程序scss文件导入到应用程序的scss文件中。

使用：全局选择器范围也不能完全实现，但这绝对可以接近完成工作，特别是如果你不使用postcss。

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

Answer 2

可以使用module rule.exclude

来完成

条件不得匹配。惯例是在这里提供一个字符串或字符串数组，但它没有强制执行。

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

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

Answer 3

是的，Drew2建议对githup问题很有帮助。将查询添加到引导CSS导入路径：

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

然后在webpack.config中，对CSS规则使用“ oneOf”：

    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 },
          },
        ],
      },
    ],
  },

  ...
],

或包含/排除：

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 },
      },
    ],
  },

... ]

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

3 个答案: