如何在react项目中使用less

6,468 阅读3分钟

我们一般都是通过create-react-app命令来创建的react项目,但是这种方式创建默认是对sass的配置,是没有less的配置的,所以我们就需要自己配置一下。

一、webpack配置文件

我们用脚手架创建的项目默认是看不到webpack配置文件的,怎么能找到webpack配置文件呢,我们可以在package.json文件中可以看到运行命令

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

前三个都是经常用的就不用说了,那么说最后一行命令,就是让webpack配置文件给暴露出来。
在终端运行命令npm run ejectyarn eject
但是事事不如意,我们有可能会出现下列错误: 这是因为我们在使用脚手架创建一个项目的时候,默认会给我增加一个.gitignore文件,而我们本地却没有文件仓库,这就需要我们在终端输入命令git add .git commit -m 修改把项目添加到本地仓库。

当以上都执行完毕以后,在次执行npm run ejectyarn eject就没有问题了。成功的截图如下: 暴露配置之后在项目里会增加一个config文件夹,一个scripts文件夹,并且原来的package.json文件内容会变更多。

二、安装less和less-loader

webpack不能识别less所以要安装相应的loader来把less解析成css。
在终端中输入npm install less-loader less --saveyarn add less-loader less --save

三、修改webpack配置文件

我们在项目根目录中找到刚才生成的config文件,找到里面的webpack.config.js这个文件:

然后搜索sassRegex就可以找到如下代码:

这个就是脚手架默认配置了css和sass的配置变量,我们一样新增less的正则,照葫芦画瓢,把sass的两个变量复制一下修改成less的

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

接着再搜索sassRegex,声明了变量肯定要用,可以找到如下代码: 找到的代码就是默认的sass配置相关的代码,按照上面的方法新增变量的方法,复制sass配置的相关部分,一共两个,把他修改成less的配置代码如下:

// Opt-in support for less (using .scss or .sass extensions).
// By default we support less Modules with the
// extensions .module.less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      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 less
// using the extension .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

这样就配置完less了,接着就可以重启项目就可以开心的写我们的less了。\

如果遇到报错# bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options,说明less版本高于3.X,请看这篇文章解决传送门

接下来可以看这篇文章配置less全局变量,react中如何使用less配置全局变量,或复制链接 https://juejin.cn/post/7051476074693132296/查看。