带有 CSS 模块的普通 CSS答案

【问题标题】：Normal CSS with CSS Modules带有 CSS 模块的普通 CSS
【发布时间】：2019-03-09 13:55:15
【问题描述】：

我之前使用 bootstrap css import 很好。

但是我正在尝试使用 CSS 模块，所以我添加了几行。

  {
        test: /\.css$/,
        use:  [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              importLoaders: 1, 
              modules: true, //<- Added to enable css module
              localIdentName: '[name]__[local]___[hash:base64:5]' //<-Added to enable css module
            }
          },
          'postcss-loader'
        ]
      },

现在我可以使用以下示例代码

  import styles from 'styles.css'

并像这样在代码中使用它

  <div className={styles.container}></div>

在浏览器中变成这样

  <div class="styles__container___3dfEE"></div>

我的 index.js 中有以下内容

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

现在，我在 bootstrap.min.css 中的所有类都不再工作了。

如何启用这两个 css 模块并继续正常使用引导 css？

我目前正在使用一种“肮脏”的方式来做到这一点，将我的自定义样式保存为 styles.sss 并在 webpack 配置中添加以下代码。不知道会不会有问题。

{
    test: /\.css$/,
    use:  [
      'style-loader',
      { 
        loader: 'css-loader', 
        options: { 
          importLoaders: 1
        }
      },
      'postcss-loader'
    ]
  },
    {
    test: /\.sss$/,
    use:  [
      'style-loader',
      { 
        loader: 'css-loader', 
        options: { 
          importLoaders: 1, 
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'postcss-loader'
    ]
  }

【问题讨论】：

你使用什么版本的css-loader、style-loader和postcss-loader？
“style-loader”：“^0.18.1”，“sass-loader”：“^6.0.5”，“postcss-loader”：“^2.0.5”，我是使用样板，所以我可能无法将它们更新到所有的最新版本。

标签： css reactjs css-modules react-css-modules

【解决方案1】：

你需要在不经过你原来的 webpack 配置的情况下导入 bootstrap 的 css：

import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";

这将激活样式加载器和 css 加载器，但没有 modules: true 选项

【讨论】：

简单易行，感谢您提供的解决方案，无需更改我所有的 webpack prod/dev/ssr 文件。

【解决方案2】：

对于这个Github pull-request issue，我之前学过一些方法。

首先，更改文件名。最简单但丑陋的方法。

将您的 styles.css 更改为 styles.m.css 并将模块和普通 css 分开

//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/

其次，将module和plain css的文件夹分开，同时相互排除。

//Module
exclude: /css/plain/
//Plain
exclude: /css/module/

第三，使用resourceQuery

test: /\.css$/,
oneOf: [{
    resourceQuery: /^\?raw$/,
    use: [...]
}

并导入为

import './bootstrap.min.css?raw'

【讨论】：

【解决方案3】：

尝试将加载器分成不同的规则。像这样：

{
  test: /\.css$/,
  use:  [
    'style-loader',
  ]
},
{
  test: /\.css$/,
  use:  [
    { 
      loader: 'css-loader', 
      options: { 
        importLoaders: 1, 
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    'postcss-loader'
  ]
}

【讨论】：

这没有帮助..但接受的答案就足够了。谢谢你！