[英]Normal CSS with CSS Modules
I was previously using bootstrap css import fine previously. 我以前使用过bootstrap css import很好。
However I'm trying to use CSS module so I added a few lines. 但是我试图使用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'
]
},
Now I'm able to use the following sample codes 现在,我可以使用以下示例代码
import styles from 'styles.css'
and use it in the code like this 并在这样的代码中使用它
<div className={styles.container}></div>
and it becomes like this in browser 它在浏览器中变成这样
<div class="styles__container___3dfEE"></div>
I have the following in my index.js 我的index.js中有以下内容
import 'bootstrap/dist/css/bootstrap.min.css';
Now, all my classes from bootstrap.min.css are no longer working. 现在,我来自bootstrap.min.css的所有类都不再起作用。
How can i enable both css modules as well as continue to use bootstrap css normally? 如何启用两个CSS模块以及正常继续使用Bootstrap CSS?
I'm currently using a "dirty" way to do it, by saving my custom styles as styles.sss instead and added the following codes in webpack config. 我目前正在使用一种“肮脏”的方式,方法是将自定义样式保存为styles.sss,并在webpack配置中添加了以下代码。 Not sure whether it will have any issues.
不确定是否会有任何问题。
{
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'
]
}
you need to import bootstrap's css without going through your original webpack config: 您需要导入引导程序的css,而无需通过原始的webpack配置:
import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";
this will activate the style-loader and css loader but without the modules: true
option 这将激活样式加载器和CSS加载器,但不包含
modules: true
选项
I have learnt few methods before for this Github pull-request issue . 在解决这个Github pull-request问题之前,我学到的方法很少。
First, change the file name. 首先,更改文件名。 Easiest way but ugly.
最简单的方法却很丑。
Change your styles.css
to styles.m.css
and separate module and plain css like 将您的
styles.css
更改为styles.m.css
,并将模块和普通CSS分开,例如
//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/
Second, separate the folders for module and plain css, while exclude each other. 其次,将模块和普通css的文件夹分开,而将它们互相排除。
//Module
exclude: /css/plain/
//Plain
exclude: /css/module/
Third, use resourceQuery
三,使用
resourceQuery
test: /\.css$/,
oneOf: [{
resourceQuery: /^\?raw$/,
use: [...]
}
And import as 并导入为
import './bootstrap.min.css?raw'
Try to separate the loaders into different rules. 尝试将装载程序分成不同的规则。 Like this:
像这样:
{
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.