react定义css样式,使用less,css模块化

土生土长的IU

已于 2023-08-10 16:22:40 修改

阅读量1.1k

点赞数

分类专栏： React系列文章标签： css react.js less

于 2023-02-24 16:38:44 首次发布

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/129203794

版权

React系列专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章介绍了如何在React项目中引入外部CSS文件，并通过Webpack配置处理Less预处理器。首先安装less和less-loader，然后通过eject生成配置文件，在webpack.config.js中添加Less的加载器规则。为了实现CSS模块化，需将样式文件命名为.module.less，并在React组件中导入并使用。这样可以避免样式污染全局。

摘要由CSDN通过智能技术生成

引入外部 css文件

import './index.css'

此时引入的样式是全局样式

使用less

安装

npm install less less-loader --save-dev

生成config文件夹
```
npm run eject
```

配置

以上代码运行完，会在根目录生成config文件夹
进入 config > webpack.config.js 查找 sass 将 less预处理器注册，如下

// 头部定义
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
        {
           importLoaders: 2,
           sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
         },
         'less-loader'
   ),
   sideEffects: true,
},
{
   test: lessModuleRegex,
   use: getStyleLoaders(
        {
           importLoaders: 2,
           sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
         },
         'less-loader'
       ),
  sideEffects: true,
},

重新运行项目

css模块化

react中没有类似vue的scoped，因此需要做css模块化

需要修改文件后缀名为.module.css

如

然后引入

import indexObj from './index.module.less'

使用

class ShoppingList extends React.Component {
  render () {
    return (
      <div className={indexObj['cmi-nav']} id='header'>
       头部
      </div>
    );
  }
}

export default ShoppingList