[英]Normal CSS with CSS Modules
我以前使用过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'
]
}
您需要导入引导程序的css,而无需通过原始的webpack配置:
import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";
这将激活样式加载器和CSS加载器,但不包含modules: true
选项
在解决这个Github pull-request问题之前,我学到的方法很少。
首先,更改文件名。 最简单的方法却很丑。
将您的styles.css
更改为styles.m.css
,并将模块和普通CSS分开,例如
//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/
其次,将模块和普通css的文件夹分开,而将它们互相排除。
//Module
exclude: /css/plain/
//Plain
exclude: /css/module/
三,使用resourceQuery
test: /\.css$/,
oneOf: [{
resourceQuery: /^\?raw$/,
use: [...]
}
并导入为
import './bootstrap.min.css?raw'
尝试将装载程序分成不同的规则。 像这样:
{
test: /\.css$/,
use: [
'style-loader',
]
},
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.