码迷,mamicode.com
首页 > 其他好文 > 详细

react项目使用less样式,配置less

时间:2020-08-20 18:22:56      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:mod   load   增加   webpack   ack   should   解析   配置文件   test   

create-react-app脚手架创建的项目有sass配置项,使用的时候只需要装包即可,下面是less使用的方法

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析,所以我们需要自己进行配置。需要安装的插件 less, less-loader

1、安装less ,less-loader

npm install less less-loader --save

2、配置less

    (1)在webpack4.x以上版本  在命令行输入npm run eject命令,将脚手架隐藏的配置文件config->webpack.config.js显示出来.并且配置

    (2)在webpack.config.js文件中找到 css和sass配置项 的 在52行增加less的解析正则规则:

const lessRegex =/\.less$/;

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

  (3)在webpack.config.js文件中的css和sass配置项 490行插入:

{

      test: lessRegex,

      exclude: lessModuleRegex,

      use:getStyleLoaders(

            {    

                importLoaders:2,

                sourceMap: isEnvProduction && shouldUseSourceMap,

              },

              less-loader

      ),

      sideEffects:true,

},

{

  test: lessModuleRegex,

  use:getStyleLoaders(

        {

                importLoaders:2,

                sourceMap: isEnvProduction && shouldUseSourceMap,

                modules:true,    

                getLocalIdent:getCSSModuleLocalIdent,

          },

          less-loader

      )

}

 

react项目使用less样式,配置less

标签:mod   load   增加   webpack   ack   should   解析   配置文件   test   

原文地址:https://www.cnblogs.com/shun1015/p/13520577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!