react中使用less

react项目自带css module作为解决方案应对全局样式污染、命名混乱等问题。原理是为每个类生成一个唯一的类名。

但样式嵌套比较深时，less比css写法更加简洁，而在react项目里直接安装less 和less-loader是没有用的，因为没有在webpack里配置。

有两种方式对webpack进行修改：

• customize-cra react-app-rewired
  重写webpack.config.js
• eject
  暴露配置文件，在源文件上进行修改。
  下面详述

ps:如果选择.css写样式 就不需要搞这些了

1 customize-cra react-app-rewired

1.1 安装less less-loader customize-cra react-app-rewired

yarn add less less-loader -D
yarn add react-app-rewired customize-cra -D

1.2 修改package.json

//package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

1.3 根目录下新建config-overrides.js

该文件用来重写配置，日后有其他需要重写的也要在这里写。

//config-overrides.js
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
    loader: "css-loader",
    options: {
      modules: {
        localIdentName: "[name]__[local]___[hash:base64:5]",
      },
      sourceMap: true
    }
  }),
)

2 eject

2.1 暴露配置文件

yarn eject

这一步可能有git的错误，自行百度
如果是练手的项目，
find . -name ".git" | xargs rm -Rf
删掉它就行

2.2 更改webpack.config.js

2.2.1

const lessRegex = /\.less$/; //这一句和下一句是新增的less的配置
const lessModuleRegex = /\.module\.less$/;

2.2.2

模仿sass-loader写，这两条跟它并列。

// Adds support for CSS Modules, but using LESS
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  modules: true,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

注意less-loader的版本，太高的话跟webpack不兼容会报Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function
装这个版本的
npm install [email protected]

3 使用

对于组件Component.js，同级目录新建Component.module.less样式文件

//引入
import styles from './Component.module.less'
//使用 将className='' 改成 className={styles.类名}
<div className={styles.eg1}> </div>

 
 
 
感谢https://www.jianshu.com/p/94ac7250ccf0，
我的项目是js写的，如果是ts项目，以上网址有相关解答。
各个细节问题该作者也有比较详细的阐述。