欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在 create-react-app 创建的项目中使用 less 模块化

程序员文章站 2022-07-03 11:28:26
...

在create-react-app 脚手架创建的项目中,突然想到要用 less 的模块化,但是 create-react-app 创建的项目只是自带 css 模块化。要使用 less 模块化,需要自行配置

首先,创建项目

create-react-app test

然后,把 react 脚手架的配置弹射出来,并 npm run i 安装项目依赖

npm run eject

找到项目下 config/webpack.config.js,在 file-loader 之前加入这部分代码

// less 开启模块化
            {
              test: /\.less$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                  loader: 'css-loader',
                  exclude: /node_modules/,
                  options: {
                    modules: {
                      localIdentName: '[local]_[hash:base64:5]'
                    }
                  }
                },
                {
                  loader: 'less-loader'
                }
              ]
            },

运行项目 npm run start,创建一个组件,并引用 less 样式文件

import React, { Component } from 'react'
import styles from './index.less'

class Home extends Component {
    state = {  }
    render() { 
        return (
            <div>
                <p className={ styles.red }>Red</p>
                <p className={ styles.green }>Green</p>
            </div>
        );
    }
}
 
export default Home;
.red {color: red}
.green {color: green; font-size: 20px;}

在浏览器审查元素,可以看到红框中,类名后面增加了唯一的的字符串,类似 vue 里面的样式类名。css 模块化最好的办法就是 class 类名的唯一性

在 create-react-app 创建的项目中使用 less 模块化

相关标签: react学习