Не могу использовать css-модули в React с Bootstrap4

Я хочу использовать модули React CSS с Bootstrap.

Сначала я создал проект с помощью команды create-react-app. Затем я установил Bootstrap 4 с NPM и включил его в свой app.js, например:

import 'bootstrap/dist/css/bootstrap.css';

Я также сделал npm eject, чтобы получить доступ к моему файлу конфигурации Webpack.

Тем временем я хотел использовать модули CSS в моем файле layout.js, поэтому я пошел в webpack.config.dev.js и изменил модули на true:

test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: true       

            }

Когда я меняю модули на true Bootstrap, CSS не отображается правильно. Если я меняю модули на false, значит, Bootstrap работает. Любая идея?

Модули: true

Модули: false


webpack reactjs create-react-app react-css-modules bootstrap-4
person Development Flow    schedule 09.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот хорошее обсуждение того, как использовать CSS-модули с другими глобальными CSS (например, Bootstrap).

https://github.com/css-modules/css-modules/pull/65

Надеюсь, поможет.

У меня была такая же проблема, и я просто загрузил загрузчик прямо в index.html из общей папки. Мой проект не настолько велик, чтобы включать бутстрап в один и тот же комплект

P.S.

На самом деле, я тоже пробовал это решение, и оно мне подходит. https://github.com/css-modules/css-modules/issues/113

Я только что переименовал все свои глобальные файлы css в .global..css

{
  test: /^((?!\.global).)*\.css$/,  // anything with .global will not 
go through css modules loader
  loaders: [
    'style-loader',
    'css-loader?modules&sourceMap&importLoaders=1&localIdentName=
[name]__[local]___[hash:base64:5]',
    'postcss-loader'
  ]
}
person Alex Brazh    schedule 31.01.2018