详解在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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 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
PHP中用hash实现的数组
2011/07/17 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
浅析PHP开发规范
2018/02/05 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
python线程池的实现实例
2013/11/18 Python
python编码最佳实践之总结
2016/02/14 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python Xpath语法的使用
2020/11/26 Python
天猫活动策划方案
2014/08/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS