2.react配置less

最新推荐文章于 2024-10-30 23:40:39 发布

山川pro

最新推荐文章于 2024-10-30 23:40:39 发布

阅读量329

点赞数

分类专栏： react 文章标签： react.js less javascript

本文链接：https://blog.csdn.net/RRRRRDong/article/details/122238733

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该博客介绍了如何在项目中安装并配置less和less-loader，包括添加依赖、自定义项目配置及修改webpack.config.js文件，以支持.scss和.less文件的处理。同时，详细展示了对样式文件正则的添加，以及getStyleLoaders函数的修改，确保模块化和非模块化的less文件都能正确处理。

摘要由CSDN通过智能技术生成

1、安装依赖库

npm install less@3.9.0
npm install less-loader@4.1.0

2、弹出配置文件以便自定义项目配置

npm run eject

3、修改config/webpack.config.js中的配置

添加样式文件正则

const lessRegex = /\.(scss|less)$/;
const lessModuleRegex = /\.module\.(less)$/;

修改getStyleLoaders函数
a.增加less-loader节点

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

b.模仿sassRegex，添加以下配置代码

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