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

在react中配置less

时间:2019-11-19 14:15:10      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:size   test   highlight   ssr   col   项目   代码   有用   sas   

在创建项目之后执行

$  yarn eject

  抽离配置文件

会多出config和script文件夹

技术图片

 

 

 

接下来安装less

yarn add less less-loader    或者    npm install less less-loader

安装完成后打开config文件夹,找到webpack.config.js文件

技术图片

 

 

 

这里一共有三项需要修改

  1.修改style files regexes(样式文件正则),找到 注释style files regexes,在这部分最后添加如下两行代码:

技术图片

 

 

 

 

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

  2.修改 getStyleLoaders 函数,添加代码

技术图片

 

 

 

lessOptions

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

  3.模仿代码中提供的sassRegex代码,添加如下代码

技术图片

 

 

 

          {
              test: lessRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            }

希望本篇博客对你有用

在react中配置less

标签:size   test   highlight   ssr   col   项目   代码   有用   sas   

原文地址:https://www.cnblogs.com/xiseliuli/p/11888599.html

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