Javascript

React中的webpack如何配置less

本文主要是介绍React中的webpack如何配置less,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. 暴露配置文件

npm run eject

如果执行 npm run eject报错 小心是.git隐藏文件 需要删除在执行命令

 

2. 下载loader

npm install less less-loader

说明:推荐使用的方法--不用考虑less-loader版本的问题 

3. 修改webpack.config.js

修改前: const cssRegex = /\.css$/;

修改后: const cssRegex = /\.css|less$/;

 4. 新增loader

   {
        loader: require.resolve('less-loader')
      },

重启项目即可:测试less文件效果

 

不推荐方案 -限制版本(参考sass 修改less配置)

打开配置文件 webpack.config.js

1、添加以下代码

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

 2.修改sass配置的loader位置

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

 把sass修改成less 名称 

重启项目

这篇关于React中的webpack如何配置less的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!