无法在Bootstrap4的React中使用CSS模块 [英] Cant use css modules in React with Bootstrap4

问题描述

我想在Bootstrap中使用React CSS模块.

I want to use React CSS modules with Bootstrap.

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

First, I created a project with the create-react-app command. Then, I installed Bootstrap 4 with NPM and included it in my app.js like:

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

我也做了npm eject来访问我的Webpack配置文件.

I also did npm eject to have access to my Webpack config file.

同时我想在我的layout.js文件中使用CSS模块，所以我去了webpack.config.dev.js并将模块更改为true:

Meanwhile I wanted to use CSS modules in my layout.js file, so I went to webpack.config.dev.js and changed modules to true:

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

            }

当我将模块更改为true时，引导CSS无法正确显示.如果我将模块更改为false，则Bootstrap在运行.有什么主意吗?

When I change modules to true Bootstrap CSS is not showing correctly. If I change modules to false then Bootstrap is working. Any idea?

模块:true

Modules: true

模块:错误

Modules: false

推荐答案

在这里很好地讨论了如何将CSS模块与其他全局CSS(例如Bootstrap)一起使用

Here's a good discussion how to use CSS-modules with other global CSS (e.g. Bootstrap)

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

希望它会有所帮助.

我遇到了同样的问题，只是将引导程序直接从公用文件夹加载到了index.html中.我的项目规模不大，无法将引导程序包含在同一捆绑软件中

I had same issue and just loaded bootstrap directly in the index.html from public folder. My project not so big to include bootstrap in the same bundle

P.S.

实际上，我也尝试过此解决方案，它对我很有用. https://github.com/css-modules/css-modules/issues/113

Actually, I also tried this solution and it works good for me. https://github.com/css-modules/css-modules/issues/113

我刚刚将所有全局css文件重命名为.global..css

I just renamed all of my global css files as .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'
  ]
}

这篇关于无法在Bootstrap4的React中使用CSS模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！