react项目如何配置less sass等css预处理器 配置时遇到的问题及解决方案

前段时间有好多小伙伴问我最新的create-react-app脚手架生成react项目后如何安装less、sass等预处理器，基于这个原因，本文主要介绍的就是react安装less、sass预处理器以及遇到的坑，闲话不多说直接进入sass的安装。

sass、sass-loader的安装与使用

react项目生成的时以及集成了sass的配置，所以在项目中我们只需要安装一下sass-loader、node-sass就可以直接使用sass了.

安装依赖

npm install sass-loader node-sass --save-dev

依赖安装完成之后我们就可以直接使用sass了。请看效果图。

上面我是直接修改了文件后缀，最终文件内容被读取到了，说了sass被支持了。相比于sass，less安装起来就没有那么方便了，看完下面这些你就知道了。

安装使用less

首先我们也是安装依赖项 npm install less-loader less --save

npm install less-loader less --save

安装完成之后，并不能直接启动，需要我们去 webpack.config.js 文件里面配置，如果你是使用create-react-app4.x之前创建的项目你可以直接将该文件显示出来，需要执行的命令是

npm run eject

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

进去改文件之后你需要增加两段内容，首先搜索关键词 cssRegex 并在这串代码上面增加 下面代码

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

完了之后再搜索  sassRegex 在这个对象下面新增一个对象注意二者是平级

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    '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,
},

下面是增加的视图预览

你以为上面就完了吗？其实里面还有很多坑，下面开始介绍坑位。

遇到的问题及解决方案

1）设置完了之后启动项目时出现 Syntax Error: TypeError: this.getOptions is not a function

一时没明白过来 getOptions is not a function 不是一个函数，是啥意思呢？心里一想是不是没有找到，然后看了一下我的依赖包的版本，瞬间卸载了重新安装了一下，安装了6.0.0版本的依赖，再次跑一下项目，发现可以了，并且项目也是正常的，上面这个报错说明我们的依赖包版本不正确，卸载了之后重新安装一下就可以了。

// 卸载
npm uninstall less-loader

// 安装
npm install less-loader@6.0.0

2）执行了 npm run eject 命令 也找不到 webpack.config.js 文件

肯定会有小伙伴遇到过这个问题，遇到这个问题的小伙伴应该是用的最新的脚手架4.x以上安装的，在4.x后config这个文件夹就被放到 node_modules 里面去了，讲到这里，你是不是豁然开朗呢？

文件路径请看下面

node_modules/react-scripts/config/webpack.config.js

上面为大家讲到了react项目中使用less、sass的基本流程以及安装过程中会遇到的坑，希望可以帮助小伙伴们成长。