首页 > 其他 > 详细

react官方脚手架添加less配置

时间:2019-12-16 20:32:52      阅读:72      评论:0      收藏:0      [点我收藏+]

装两个包

npm install --save less less-loader

在node-modules/react-scripts/config/webpack.config.js

在大概58sass校验规则的下面,配置less规则

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 配置less的校验规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在大概560sass配置的下面,加上如下代码

 

{
  test: lessRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        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 SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      less-loader
  ),
},

 

最后重启下服务器:npm start

react官方脚手架添加less配置

原文:https://www.cnblogs.com/shengjunyong/p/12050829.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!