关闭

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

时间: 2018-12-23阅读: 2328标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

Webpack 是怎样运行的?

在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率。主要包含入口(entry)、输出文件(output)、模式、加载器(Loader)、插件(Plugin)等几个部分

webpack3升级为webpack4的实践

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

Webpack如何实现一个Loader?

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块,编写loader时要遵循单一原则,每个loader只做一种\\\"转义\\\"工作

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

Webpack有哪些常见的Plugin?他们是解决什么问题的

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

webpack常用插件_webpackPlugin插件总结

本地开发构建’自然离不开webpack,webpack想要工作,那它就需要各种插件的支持,有不少童鞋在平时的项目开发中使用过Webpack Plugins,这篇文章整理总结常用的webpackPlugin插件

点击更多...

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