详解在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 相关文章推荐
js获取class的所有元素
Mar 28 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
德生PL330测评
2021/03/02 无线电
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
群众路线剖析材料怎么写
2014/10/09 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
学校财务管理制度
2015/08/04 职场文书
2016十一国庆节感言
2015/12/09 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
golang中字符串MD5生成方式总结
2021/07/04 Golang
一起来学习Python的元组和列表
2022/03/13 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL