sách gpt4 ai đã đi

css - CSS thuần túy với các mô-đun CSS

In lại 作者:行者123 更新时间:2023-11-28 10:25:37 32 4
mua khóa gpt4 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'

然后像这样在代码中使用它

  

在浏览器中变成这样

  

我的 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'
]
}

1 Câu trả lời

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

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

这将激活 style-loader 和 css loader 但没有 modules: true Tùy chọn

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

32 4 0
Bài viết được đề xuất: html - 如何将 标签与 标签一起使用
Bài viết được đề xuất: html - 我无法使用 html 和 css 在 Sencha Architect 中设置我的图标大小
Bài viết được đề xuất: css - 在 Ionic 中用圆 Angular 提醒
Bài viết được đề xuất: html - 带 Angular 单元测试css
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com