React脚手架配置less

安装完React脚手架以后，是不支持less的，也不支持less的嵌套样式，需要我们在webpack.config.js中配置一下。

解决的问题

• 不支持less
• 不支持less的嵌套样式

一、react脚手架搭建

1、全局安装

npm i -g create-react-app
           

2、创建项目my-app

create-react-app my-app
           

3、进入项目文件夹并启动

cd my-app
npm start
           

二、安装less和less-loader

npm i less less-loader
           

三、暴露webpack配置文件

安装完脚手架之后，我们在目录结构中看不到

webpack.config.js文件

，这是因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，同时，被其集成的脚本和配置也会从目录中消失 ，使目录也会变得很干净。通过下面步骤进行暴露

webpack.config.js文件

（版本低的会出现

webpack.config.dev.js

和

webpack.config.prod.js

），下面仅是针对

webpack.config.js 文件

配置。

npm run eject  
           

注意：执行该命令后会把已构建依赖项、配置文件和脚本复制到目录中。该操作是不可逆转的，执行完成后会删除这个命令，只能执行一次。

四、修改 webpack 配置

支持less

• 第一步：在

  webpack.config.js

  文件中找到如下代码，在sassModuleRegex后面加上lessRegex和lessModuleRegex两个变量

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

• 第二步：在

  module.rules.oneOf

  下sassModuleRegex后面加上以下两段代码，因为react默认支持sass，所以只需要把sass的配置方法复制一份给less。

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },
           

• 第三步：重启项目，less便会生效。

解决less嵌套样式不生效的问题

把下面的代码加到webpack中

getStyleLoaders

方法里css-loader下面

const getStyleLoaders = (cssOptions,lessOptions, preProcessor) => {
	{
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
	}