react 中开启css-modules

tsl_280

于 2021-12-06 14:43:22 发布

阅读量522

点赞数 2

CC 4.0 BY-SA版权

文章标签： css javascript css3 react webpack

本文链接：https://blog.youkuaiyun.com/tsl_280/article/details/121746468

本文介绍了React中如何开启CSS-Modules以实现CSS的局部作用域，防止样式污染。通过在webpack配置中改造，设置`localIdentName`来控制类名生成规则。在代码中，修改引入和使用CSS的方式，利用`className`结合导入的样式对象来应用样式。同时，展示了如何在CSS/SCSS中编写全局样式，通过`:global`选择器避免局部编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 中开启css-modules

css-modules开启作用

css-modules开启作用

css拥有局部作用域,放在css污染

webpack中改造

{
     loader:'css-loader',
        options: {
            modules: {
               localIdentName: "[path][name]__[local]",
            },
       }
}

代码中修改 index.jsx

// 引入方式修改
// import './index.scss';
import style from './index.scss';

// 使用方式
classNmae={style.XXX}

css/scss 中局部不编译 global

 // 添加局部
     :global(.focused){ // 样式名称
        background-color: pink; // 样式内容
    }