如何在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数组。

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

 

{
  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了。

作者：LilyLaw
链接：https://www.jianshu.com/p/d5dd8b108461
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。