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

原创已于 2023-08-10 16:22:40 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #react.js #less

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

React系列专栏收录该内容

13 篇文章

订阅专栏

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

引入外部 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