React使用less语法

世间万物皆对象

发布于 2024-03-20 19:56:25

1130

发布于 2024-03-20 19:56:25

文章被收录于专栏：startstart

1. 安装

yarn add less less-loader or npm i less less-loader

2. 打开webpack配置文件

创建项目的时候我们是看不到webpack文件的需要暴露出来

yarn eject or npm run eject

3. 配置less语法环境

在config文件下找到webpack.config.js文件打开webpack.config.js找到如下图：

在下面添加如下两句代码：

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

添加完上面两句代码后收索oneOf 找到配置sass的代码片段，如图：

在其下面添加如下代码：

		 {

          	  test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                },

                'less-loader'

              ),

              // Don't consider CSS imports dead code even if the

              // containing package claims to have no side effects.

              // Remove this when webpack adds a warning or an error for this.

              // See https://github.com/webpack/webpack/issues/6571

              sideEffects: true,

            },

            // Adds support for CSS Modules, but using SASS

            // using the extension .module.scss or .module.sass

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                  modules: true,

                  getLocalIdent: getCSSModuleLocalIdent,

                },

                'less-loader'

              ),

            },