无法使用css模块与Bootstrap4进行交互

Question

我想使用的反应CSS模块与引导。

首先，我使用create-react-app命令创建了一个项目。然后，我用NPM安装了引导程序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时，引导CSS没有正确显示。如果我将模块更改为false，那么引导程序就可以工作了。有什么想法吗？

模块:真

模块: false

Answer 1

这里有一个很好的讨论如何使用CSS -模块与其他全局CSS(例如，引导)

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

希望能帮上忙。

我也有同样的问题，只是直接从公用文件夹在index.html中加载了引导程序。我的项目不太大，不足以在同一个包中包含引导程序。

附注：

事实上，我也尝试过这个解决方案，它对我有好处。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'
  ]
}