Как исключить файлы начальной загрузки, когда модули CSS включены

Я использую как модули начальной загрузки, так и модули CSS, включив опцию модулей css-loader в моем проекте, и, к сожалению, 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"}
      ]

например класс начальной загрузки .table превращается во что-то вроде .app__table--19A_z

Как вы думаете, я могу отключить модули CSS для файлов начальной загрузки.


webpack bootstrap-4 css-loader
person bigfanjs    schedule 27.05.2017    source источник
comment
Возможный дубликат webpack2: как импортировать Bootstrap CSS, чтобы react-bootstrap нашел его стили?   -  person Michael Jungo    schedule 27.05.2017
comment
Определение отдельных правил выглядит разумным решением, но оно по-прежнему загрязняет файлы начальной загрузки, даже если я установил exclude: /node_modules/   -  person bigfanjs    schedule 27.05.2017
comment
твоя проблема решена?   -  person Adi Prasetyo    schedule 31.07.2017

Ответы (3)


arrow_upward
1
arrow_downward

Это можно сделать с помощью module rule.exclude

Условие НЕ должно совпадать. Соглашение состоит в том, чтобы предоставить здесь строку или массив строк, но оно не применяется.

поэтому, чтобы исключить файл scss boostrap, должно быть так:

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

arrow_upward
1
arrow_downward

Этого нельзя добиться просто с помощью exclude, потому что вы импортируете загрузочные файлы scss в файлы scss вашего приложения с одной точкой входа.

Это также не может быть полностью выполнено с областью селектора :global, но это определенно может приблизиться к выполнению работы, особенно если вы не используете postcss.

Чтобы увидеть текущее обсуждение этой темы, просмотрите эту проблему github: https://github.com/css-modules/css-modules/pull/65

person Drew2    schedule 06.09.2017

arrow_upward
0
arrow_downward

Да, совет Drew2 обратиться к проблеме gitup очень полезен. Добавьте запрос в путь импорта bootstrap 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 },
          },
        ],
      },
    ],
  },

  ...
],

ИЛИ с включением/исключением:

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

... ]

person Konstantin    schedule 19.08.2020