gpt4 book ai didi

css - 带有 CSS 模块的普通 CSS

转载 作者:行者123 更新时间:2023-11-28 10:25:37 31 4
gpt4 key购买 nike

我以前使用 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 模块并继续正常使用 bootstrap 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'
]
}

最佳答案

你需要导入 bootstrap 的 css 而无需通过你原来的 webpack 配置:

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

这将激活 style-loader 和 css loader 但没有 modules: true 选项

关于css - 带有 CSS 模块的普通 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52642217/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com