如何在react中使用less

目前创建react项目一般使用 create-react-app 这个脚手架工具来创建，但这种方式默认没有对于less的配置。所以我们自己配置一下：

1. 暴露出webpack配置文件#

使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。

终端运行一下命令（注意：此命令一旦运行会修改package.json 文件，不可回退）

npm run eject

2. 安装less和less-loader#

运行以下命令：

npm install less-loader less --save

如果遇到安装失败的情况，请改用cnpm。

3. 修改webpack配置文件#

运行完以上命令后，项目根目录下会多出一个 config 文件夹，找到里面的 webpack.config.js 这个文件

 

image

3.1 增加less配置1#

找到下面这段代码

 

 

image

在这下面直接添加以下代码：

 

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

道理大家应该懂：webpack里配置了css和sass，我们想用less就需要加入less配置。

3.2 增加less配置2#

在此文件中搜索 oneof

 

3.png

可以看到关于sass部分的配置，那我们再加入less的相关配置：先复制一份，将sass部分修改为less，再加入oneOf数组。

把我的复制出来，大家可以直接用：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

{   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'   ), },

　　

这样就配置完成，可以直接使用less了。