react接入less

草宝虫

已于 2023-02-01 08:20:02 修改

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js less javascript

于 2023-02-01 08:14:55 首次发布

本文链接：https://blog.csdn.net/whq12789/article/details/128826136

react 专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何在React项目中安装并配置less-loader以处理less文件，包括exposewebpack配置、修改webpack.config.js、添加less规则以及处理模块化。通过这些步骤，开发者可以顺利地在项目中引入并使用less预处理器。

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

安装less

npm i  less less-loader@5.0.0

注：新版的less-loader不兼容

暴露webpack配置

react的webpack配置是默认隐藏的，封装在react脚手架包里。
要想加入自己的配置，需要暴露出webpack文件。

npm run eject

注：对应
“eject”: “react-scripts eject”
会显示出默认的配置文件：

里面有个webpack.config.js文件，就是我们要写自己的配置的地方。

添加配置

添加正则

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

下面添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

修改loaders方法

const getStyleLoaders = (cssOptions, preProcessor) => {

改为

const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {

添加less-loader

{
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },

下面添加

      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },

添加规则

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },

后面添加

            /** less */
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

重启npm run start即可

示例

index.less

@def: pink;

.color1 {
    color: @def;
}

index.js

import './index.less';
//使用样式
<h3 className="color1">hello react!</h3>