详解在create-react-app使用less与antd按需加载


Posted in Javascript onDecember 06, 2018

使用antd按需加载

使用react-app-rewired对 create-react-app 的默认配置进行自定义

1、yarn add react-app-rewired --dev

/* package.json */
"scripts": {
-  "start": "react-scripts start",
+  "start": "react-app-rewired start",
-  "build": "react-scripts build",
+  "build": "react-app-rewired build",
-  "test": "react-scripts test --env=jsdom",
+  "test": "react-app-rewired test --env=jsdom",
}

2.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
 // do stuff with the webpack config...
 return config;
};

使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式babel 插件(原理),现在我们尝试安装它并修改config-overrides.js 文件

1.yarn add babel-plugin-import --dev

+ const { injectBabelPlugin } = require('react-app-rewired');

 module.exports = function override(config, env) {
+  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
  return config;
 };

或者也可修改

{
      test: /\.(js|jsx|mjs)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
       plugins: [
        ['import', { libraryName: 'antd', style: true }],
       ],
       // This is a feature of `babel-loader` for webpack (not Babel itself).
       // It enables caching results in ./node_modules/.cache/babel-loader/
       // directory for faster rebuilds.
       cacheDirectory: true,
      },
     },

自定义主题

yarn add react-app-rewire-less --dev

const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

 module.exports = function override(config, env) {
-  config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+  config = rewireLess.withLoaderOptions({
+   modifyVars: { "@primary-color": "#1DA57A" },
+  })(config, env);
  return config;
 };

参考链接:https://ant.design/docs/react/use-with-create-react-app-cn

使用less

如果已经配置react-app-rewire-less,则无需再进行此操作

1.npm install less-loader less --save-dev
2.修改node_modules/react_script/config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件

  • test: /.css$/ 改为 /.(css|less)$/
  • test: /.css$/ 的 use 数组配置增加 less-loader
{
 test: /\.(css|less)$/,
 use: [
  require.resolve('style-loader'),
  {
   loader: require.resolve('css-loader'),
   options: {
    importLoaders: 1,
   },
  },
  {
   loader: require.resolve('postcss-loader'),
   options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: 'postcss',
    plugins: () => [
     require('postcss-flexbugs-fixes'),
     autoprefixer({
      browsers: [
       '>1%',
       'last 4 versions',
       'Firefox ESR',
       'not ie < 9', // React doesn't support IE8 anyway
      ],
      flexbox: 'no-2009',
     }),
    ],
   },
  },
  {
   loader: require.resolve('less-loader') // compiles Less to CSS
  }
 ],
},

使用css Module

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。

使用 exclude 和 include 配置,修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件,在与antd一起使用时可能出现错误,单独写一条规则)

{
      test: /\.css$/,
      exclude: /node_modules|antd\.css/,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
         modules: true,  // 新增对css modules的支持
         localIdentName: '[name]__[local]__[hash:base64:5]',
        },
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
      ],
     },
     {
      test: /\.less$/,
      exclude: /node_modules|antd\.less/,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
         modules: true,  // 新增对css modules的支持
         localIdentName: '[name]__[local]__[hash:base64:5]',
        },
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
       {
        loader: require.resolve('less-loader') // compiles Less to CSS
       },
      ],
     },
     {
      test: /\.(css)$/,
      include: /node_modules|antd\.css/,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
        },
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
      ],
     },
     {
      test: /\.(less)$/,
      include: /node_modules|antd\.less/,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
        },
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
       {
        loader: require.resolve('less-loader') // compiles Less to CSS
       },
      ],
     },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
Vue指令指令大全
Feb 09 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 #Javascript
使用react render props实现倒计时的示例代码
Dec 06 #Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 #Javascript
谈谈React中的Render Props模式
Dec 06 #Javascript
详解Vue-axios 设置请求头问题
Dec 06 #Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
You might like
香妃
2021/03/03 冲泡冲煮
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP中PDO的错误处理
2011/09/04 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
javascript 常用功能总结
2012/03/18 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
js实现简易ATM功能
2020/10/27 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Flask实现跨域请求的处理方法
2018/09/27 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python实现分数序列求和
2020/02/25 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
护士专业推荐信
2013/11/02 职场文书
村委会主任先进事迹
2014/01/15 职场文书
市场专员岗位职责
2014/02/14 职场文书
2014财务年终工作总结
2014/12/08 职场文书
英文商务邀请函范文
2015/01/31 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年超市工作总结
2015/04/09 职场文书