在webpack自定义配置antd的按需加载和修改主题色

更新日期: 2018-12-23阅读量: 3042标签: webpack

最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:

(1)添加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less
(2)根目录添加config-overrides.js
(3)修改npm script即可, 一切正常

这里主要说的是自建的react项目中如何配置及其容易出现的坑


一、按需加载

(1)在.babelrc中添加plugins (这里也可以在babel-loader的options中添加)

['import', { 
    libraryName: 'antd', 
    libraryDirectory: 'es',
     style: 'css' 
    }
]

注意该步很容易有报错:

.bezierEasingMixin();Inline JavaScript is not enabled. Is it set in your options?

此时检查package.json中看看less的版本是否是3.x, 如果时降为less@2.7.3

再重启项目,搞定。

 

二、修改主题色

找到webpack.config.js的less-loader, 在options中添加

{
     loader: 'less-loader',
     options: {
        sourceMap: true,
        modifyvars: {
           'primary-color': '#1DA57A',
           'link-color': '#1DA57A',
           'border-radius-base': '2px'
         },
     JavaScriptEnabled: true   // 此项不能忘
  }
}

此处有个坑,之前使用ExtractTextPlugin插件对css样式提取,但如配置主题色修改,不能再使用提取插件,另外,找到.babelrc中找到之前按需加载的配置修改:

['import', { 
      libraryName: 'antd', 
      style:  true
   }
]

删除之前的 libraryDirectory: ‘es‘,

修改之前的 style: "css" 为 style: true

修改主题是基于less提供的modifyvars变量进行修改的,所以按需加载时使用true


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1673

浅谈webpack优化

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

webpack系列之loader及简单的使用

webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集比如jsx,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。

通用、封装、简化 webpack 配置

现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候,总是免不了要配置 webpack,很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库,比如 roadhog。

分享12个Webpack中常用的Loader

整理一些常用的loader分享给大家,方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行,不喜勿喷。style-loader用于将css编译完成的样式,挂载到页面style标签上。

webpack3升级为webpack4的实践

之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化

解决-webkit-box-orient: vertical在webpack打包后丢失问题

该方式比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。但是在现在一些框架中如(Vue,react项目中使用),会发现本地正常,打包线上后,该属性丢失

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

Vue中使用webpack别名的方法

Vue中使用webpack别名的方法,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!