正常 CSS 与 CSS 模块
Normal CSS with CSS Modules
我之前使用的是 bootstrap css import fine previously.
但是我正在尝试使用 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?
我目前正在使用 "dirty" 方法来实现,方法是将我的自定义样式另存为 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";
这将激活样式加载器和 css 加载器,但没有 modules: true
选项
我以前学过一些方法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'
尝试将加载程序分成不同的规则。像这样:
{
test: /\.css$/,
use: [
'style-loader',
]
},
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
}
我之前使用的是 bootstrap css import fine previously.
但是我正在尝试使用 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?
我目前正在使用 "dirty" 方法来实现,方法是将我的自定义样式另存为 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";
这将激活样式加载器和 css 加载器,但没有 modules: true
选项
我以前学过一些方法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'
尝试将加载程序分成不同的规则。像这样:
{
test: /\.css$/,
use: [
'style-loader',
]
},
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
}