Невозможно пропустить стороннюю библиотеку CSS из преобразования CSS-модуля

Я впервые пробую CSS-модули с React и Webpack, и я нашел как минимум три способа добиться этого:

  1. css-загрузчик
  2. react-css-modules
  3. babel-plugin-react-css-modules

Я выбрал babel-plugin-react-css-modules, чтобы сбалансировать простоту кода и производительность, и, похоже, все работает нормально, за исключением одного: мои сторонние библиотеки (Bootstrap и Font Awesome) также включены в преобразование модулей CSS.

<NavLink to="/about" styleName="navigation-button"></NavLink>

Вышеупомянутое присваивает правильно преобразованный className NavLink. Однако span внутри должен ссылаться на глобальные стили для отображения значка.

<span className="fa fa-info" />

Вышеупомянутому диапазону не назначается преобразованный className, который ожидается, но моя связанная таблица стилей не имеет этих классов CSS, поскольку они преобразуются во что-то еще для имитации локальной области.

Ниже приведено содержимое моего .babelrc файла для активации babel-plugin-react-css-modules:

{
  "presets": ["env", "react"],
  "plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".less": {
          "syntax": "postcss-less"
        }
      }
    }]
  ]
}

В моей конфигурации Webpack ниже находится раздел для настройки css-loader для преобразований:

{
    test: /\.(less|css)$/,
    exclude: /node_modules/,
    use: extractCSS.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: {
                    minimize: true,
                    modules: true,
                    sourceMap: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            },
            {
                loader: 'less-loader'
            }
        ]
    })
}

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

Чтобы импортировать CSS из двух библиотек, у меня есть две следующие строки в моей родительской таблице стилей, которые объявляют некоторые глобальные стили:

@import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import '../../../node_modules/font-awesome/css/font-awesome.min.css';

webpack reactjs css-modules babel-plugin-react-css-modules
person myTerminal    schedule 14.06.2018    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Я считаю, что эти два подхода, приведенные ниже, могут быть полезны:

Короче говоря, похоже, что пока нет вариантов игнорировать / исключать определенные пути из модульного представления плагином webpack css-modules. В идеале он должен поддерживаться плагином, но вот несколько подходов, которые вы можете попробовать:

используйте два правила веб-пакета, чтобы использовать правило исключения / включения веб-пакета:

module.exports = {
  rules: [
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[path]__[local]___[hash:base64:5]',
          },
        },
      ],
    },
    {
      test: /\.css$/,
      include: /node_modules/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

... или, ввести в getLocalIdent веб-пакета из второго ответа выше, чтобы вручную исключить определенные пути.

const getLocalIdent = require('css-loader/lib/getLocalIdent');

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      return loaderContext.resourcePath.includes('semantic-ui-css') ?
        localName :
        getLocalIdent(loaderContext, localIdentName, localName, options);
    }
  }
}
person Gasai Yuno    schedule 14.12.2018
comment
Ого, твой второй подход - это именно то, что я искал ... долгое время. - возможность полностью контролировать свое идентификационное имя. Спасибо! - person Ilia Andrienko; 05.02.2019
comment
Я наконец смог заставить его работать с первым подходом. Я использую более новую версию webpack, поэтому мне нужно было изменить конфигурацию module / localIdenName для бит модулей: {localIdentName: '[path] __ [local] ___ [hash: base64: 5]'} - person Ruben; 31.05.2020

arrow_upward
2
arrow_downward

Для меня сработало :global:

.my-component {
    :global {
        .external-ui-component {
           padding: 16px;
           // Some other styling adjustments here
        }
        ...
    }
}

Ps: чтобы сделать это с конфигурацией webpack, см. Другой ответ.

исходный код

person yaya    schedule 30.10.2020
comment
Спасибо, сработало отлично! - person Vinícius Silva; 19.03.2021

arrow_upward
1
arrow_downward

Обновленное решение от plays771

 {
    loader: 'css-loader',
    options: {
      modules: {
        auto: (resourcePath) => !resourcePath.includes('node_modules'),
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
 },
person igor    schedule 07.02.2021