React中的webpack如何配置less

最新推荐文章于 2024-09-22 09:37:59 发布

原创最新推荐文章于 2024-09-22 09:37:59 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #less

react 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在Webpack中启用Less支持的步骤，包括执行`npm run eject`以暴露配置文件，安装`less`和`less-loader`，然后修改`webpack.config.js`，将`.css`扩展名替换为`.css|less`并添加新的loader。同时提供了针对模块化less文件的配置方法，并在修改后重启项目以测试less文件效果。

1. 暴露配置文件

npm run eject

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

2. 下载loader

npm install less less-loader@5.x  -D

说明：推荐使用的方法--注意less-loader版本的问题

3. 修改webpack.config.js

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

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

4. 新增loader

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

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

（参考sass 修改less配置 less-loader版本@5.x）

打开配置文件 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 名称

重启项目