0

我想将 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       

            }

当我将模块更改为trueBootstrap 时，CSS 显示不正确。如果我将模块更改为，false则 Bootstrap 正在工作。任何想法？

模块：真

模块：假

4

1 回答 1

0

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

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'
  ]
}
于 2018-01-31T08:00:39.283 回答