其他分享
首页 > 其他分享> > React中less无法使用,less如何配置(暴力简单)

React中less无法使用,less如何配置(暴力简单)

作者:互联网

首先大家明白一点React中默认是配置Sass的,所以想要配置Less的话看下面:

1.有一些第三方的框架会默认配置less 例如:

a:umi.js (蚂蚁金服前端框架)按照该框架官方文档引入即可

2.手动配置Less即可

a.首先先创建一个初始的React-app。此时,就算import less也无法应用,因为React提供的脚手架为creact-react-app默认配置sass。

b.接下来,就是固定的npm安装less

npm install less less-loader --save

c.在创建好的项目文件夹中找到 package-lock.json 文件进入,Ctrl+f后输入eject找到该行代码

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

d.运行eject,中间可能会需要输入y去确定其他配置,可直接一y到底

npm eject||yarn eject

e.此时,项目列表下的config文件夹中可以找到 webpack.config.js 这个文件,打开进入

f.Ctrl+f查找输入sassregex找到该行,并连同下一行一起复制

 

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//紧靠其后添加两行代码
const lessRegex=/\.less$/;
const lessModuleRegex = /\.module\.less$/;
//只是将sass修改为less

 

g.继续找下一处sassRegex和sassModuleRegex

 

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },

 

将这两段代码复制,并且都将sass修改为less即可,为防止大家在修改过程中因为括号和标点出错,将源码贴到下面:

 

            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
//以上为文件原有sass配置代码,下面为添加的less配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

接下来就能够创建后缀为.less的文件并编辑样式了,大家可以覆盖调之前的css文件代替为less试一试是否成功,大家有问题可以评论区提问,或者本人解释错误的请提出来,谢谢

标签:暴力,sass,less,isEnvDevelopment,loader,React,sourceMap,test
来源: https://blog.csdn.net/TYUT_LiXiaoYao/article/details/115461532