Question

我想将React CSS模块与Bootstrap一起使用。

首先，我使用create-react-app命令创建了一个项目。然后，我用NPM安装了Bootstrap 4并将其包含在我的app.js中，如：

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

我也npm eject访问了我的Webpack配置文件。

同时我想在layout.js文件中使用CSS模块，所以我去了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正在运行。有什么想法吗？

Modules: true

Modules: false

Answer 1

这里有一个很好的讨论如何将CSS模块与其他全局CSS（例如Bootstrap）一起使用

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

希望它有所帮助。

我遇到了同样的问题，只是从公共文件夹中直接在index.html中加载了bootstrap。我的项目不是那么大，不能在同一个包中包含bootstrap

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

不能在React和Bootstrap4中使用css模块

1 个答案: