Recat css modules

最新推荐文章于 2025-05-09 23:18:34 发布

原创最新推荐文章于 2025-05-09 23:18:34 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-css-modules

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React项目中配置CSS Modules的三种方法。一是利用create-react-app内置配置，设置style.module.css文件并引入使用；二是通过npm run eject弹出config配置文件，修改webpack.config.js，使css文件无需加.module后缀；三是安装sass-loader和node-sass，利用内置支持的scss进行配置。

method one:
create-react-app内置CSS Modules配置
设置style.module.css文件
.css{
background-color:red;
}

在主组件App.js引入css文件
import style form “./style.module.css”;

在组件内部元素里面使用
className={style.css}

tips:此时普通样式就不起效果了，需要用全局的方式去编写(:global)
:global(.App){
text-align:center;
}

method two:
npm run eject 弹出config配置文件
注意:这是一个单项操作，不可逆

修改config/webpack.config.js文件找到如下内容
在use属性执行的方法中添加 modules:true
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
sourceMap: isEnvProduction && shouldUseSourceMap,
})
现在你的css文件不需要加上.module的后缀了，直接可以使用

设置style.css
.css{
font-size: 24px;
color: yellowgreen;
}

在主组件App.js引入css文件
import style form “./style.css”;

在组件内部元素里面使用
className={style.css}

method three:
npm install sass-loader node-sass --save-dev
create-react-app内置支持scss
设置style.module.css文件
$color : blue;
.css {
font-size: 24px;
color: $color;
}

在主组件App.js引入css文件
import style from “./style.module.scss”;

在组件内部元素里面使用
className={style.css}