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

Stack Overflow用户

提问于 2017-05-27 00:15:02

回答 3查看 9.6K关注 0票数 9

通过在我的项目中启用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模块？

webpack

bootstrap-4

css-loader

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 3

Stack Overflow用户

发布于 2017-08-02 06:20:06

它可以用来实现

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

因此，要排除引导scss文件，应如下所示：

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

票数 1

Stack Overflow用户

发布于 2017-09-06 18:48:24

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

使用:global选择器作用域也不能完全完成这项工作，但这绝对可以接近完成这项工作，特别是如果您没有使用postcss。

要查看关于此主题的正在进行的讨论，请查看此github问题：https://github.com/css-modules/css-modules/pull/65

票数 1

Stack Overflow用户

发布于 2020-08-19 20:50:03

是的，Drew2的建议是非常有帮助的。将查询添加到引导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 },
          },
        ],
      },
    ],
  },

  ...
],

或者使用include/exclude：

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