我正在尝试在我使用 React 和 Webpack 的项目中实现 CSS 模块。但是,我想继续使用我创建的所有全局 CSS。
例如,之前我在React中像这样导入了css
import './styles.scss'
然后,将有一个使用 .button
类的 html 元素,该类存在于 ./styles.scss
<button className='button'>Click me</button>
现在因为我想实现 CSS 模块,所以我修改了 webpack 中的 css-loader
配置,如下所示
module: {
rules: [{
test: /\.s?css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// This is where I added the config for css modules
modules: true,
localIdentName: '[hash:base32:5]-[name]-[local]',
importLoaders: 2,
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js',
},
},
},
'sass-loader',
]
}]
}
但是,现在当我这样导入时,我无法使用 button
类名
import './styles.scss'
因为./styles.scss
中的类名都转换为基于哈希的类名,例如32osj-home-button
基本上,当我以这种方式导入时,如何配置 css-loader 来正常加载 css
import './styles.scss'
但是当我以这种方式导入时使用CSS模块吗?
import styles from './styles.scss'
或者
是否有任何配置可以设置CSS模块默认加载:global
中的所有CSS,并且当我指定时仅加载:local
中的CSS?
仅供引用,我知道我可以制作 2 个加载器配置来为以此方式命名的 css 文件应用 css 模块
styles.modules.scss
并为默认命名的 css 应用普通的 css-loader
styles.scss
但是,我不想这样做,因为 Webpack 捆绑它们后会创建更多文件。
最佳答案
对于 css 模块,我这样使用它:
import styles from './styles.scss'
<button className={styles.button}>Click me</button>
导入的样式实际上是一个带有 [className] => [hashed_className] 的 map
您放入 :global block 中的所有内容都不会转换为 CSS 哈希名称
:global {
.button {
color: #FF0000;
}
}
.button {
color: #000000;
}
应该输出
.button {
color: #FF0000;
}
.32osj-home-button {
color: #000000;
}
关于reactjs - 如何让CSS Modules默认全局导入文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47879866/