引入less

如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行:

npm run eject

如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才能够eject成功,否则命令会报错,因为该操作是不可逆的,一旦暴露出配置文件后eject功能将被删除。

eject成功后项目下会多出两个文件夹,config和scripts,我们开发中一般只需关心config文件下的webpack.config.dev.js、webpack.config.prod.js、webpackDevServer.config.js,其他多出来的文价不要管他:

然后安装less和lessloader:

npm install less less-loader --save-dev

修改webpack.config.dev.js和webpack.config.prod.js,两个文件一样的地方修改,找到配置中的module.rules下面的test: /\.css$/处的配置,需要改的地方:

将其改为:

          {
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: ,
},
},
{
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') }
],
},

然后就可以在项目中畅用less了,sass配置方法一样,只是安装的包不一样,node-sass和sass-loader----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

不过现在create-react-app默认安装版本是2.03了,其中有些改变,在新版本脚手架中css的rules.test的值被提取到外面声明为一个变量,并将css的rules.use同样提取为一个函数在外部声明,函数接受两个参数,第一个为传入css-loader的Options,第二个为可选,就是需要添加的loader,最后返回配置后的loader数组:

看到这里发现其实只是变换了写法而已,并且新版本脚手架中已经配置了sass了,依葫芦画瓢,最笨的办法就是也定义两个关于less的变量:

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

然后在oneOf数组最后复制sass的两个loader配置追加到后面,将变量对应的改为上面自己声明的变量,并将第二个参数'sass-loader'改为'less-loader':

          {
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({ importLoaders: }, 'less-loader'),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: ,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},

然后重新运行即可,亲测!

不要忘记两个配置文件都要改哦!

按需引入antd组件

安装使用不多说了直接进入正题,如何按需加载,使用需要用到的组件:

import { Button } from 'antd'

安装按需引入所需要的插件:

npm install babel-plugin-import --save-dev

然后在package.json中babel属性下添加:

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

完整的应该是:

 "babel": {
"presets": [
"react-app"
],
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}]
]
},

当然这个不在package.json中配置也行,在.babelrl中配置也可以,或者在webpack.config.js中配置也可以,但是因为要同时改dev和prod两个文件会比较麻烦,pugins是个二维数组!!不要复制粘贴错了哦!

修改antd默认主题颜色
这样就实现了antd组件按需加载了,不需要再额外引入组件样式了,但是如果要更改antd主题颜色的话,这里这个style属性值就不能是"css"了。必须改成true,原因是因为值是css时按需加载时加载的就是antd编译后之后的css文件,要更改主题颜色是要更改less变量的,而true标识直接加载antd的less文件,注意,坑来了!!当你设为true时,你会发编译失败,页面中antd组件也会没有样式了,命令行抛出如下异常:

这是因为你还没配置less-loader的配置项,在之前我复制修改的那个地方只是引入使用了less-loader,并没有添加配置项,导致他就会出现这个异常,在网上找资料大概less的版本2.7.3以前不会出现这个问题,所以我们要先给less-loader一个修改antd主题颜色的配置,在create-react-app 2.0以前的配置方法:

在最新的react脚手架版本中,上面也提到了,因新版本的配置文件中关于css的rules中的use值被提到外部声明成了一个配置函数,函数返回该样式文件类型所需要的loader数组,所以经过我如下修改并测试,成功修改主题颜色:

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: ,
}),
],
},
},
];
if (preProcessor) {
let loader = require.resolve(preProcessor)
if (preProcessor === "less-loader") {
loader = {
loader,
options: {
modifyVars: {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
};

其实也就是修改了该函数if(preProcessor)中的代码,其他地方并没有改,当然dev和prod两个文件同样都要改,以保证线上代码不会有问题,prod文件中这个if(preProcessor)中默认已经配置了一个options:

    loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
});

所以这个我们这样改:

  if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
}
if (preProcessor === "less-loader") {
loader.options.modifyVars = {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}

现在可以开始来快乐的撸你的 代码咯。。。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------

转载至:https://blog.csdn.net/qwe502763576/article/details/83242823

三、create-react-app新旧版中使用less和antd并修改主题颜色的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. (转)Resources和AssetBundle(新旧版)学习

    Resources:   Resources的缺点:1.与显示Inspector上直接引用相比,Resources使用不方便.     2.不管你Resources上的资源是否调用了,当你发布的时候, ...

  7. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  8. Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比

    AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...

  9. JavaScript 兼容新旧版chrome和firefox的桌面通知

    1.新/旧版本的chrome和firefox都可支持,IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字. 2.设置为提示窗口显示5秒即关闭. 3.可设置图标和点击提示窗口要跳转到的页面(见输入参 ...

随机推荐

  1. considerate|considerable|content|Contact|Consult|deceived|

    ADJ-GRADED 替人着想的;体贴的Someone who is considerate pays attention to the needs, wishes, or feelings of o ...

  2. but for|lest,in case和for fear (that)|confidential|item|adapted for|fee|debates| retain|substantial|proceeded to|refrain from|clear|perceive

    He ________ you if you ________ to see him that afternoon.  A. might tell, were going  B. told, were ...

  3. 浅谈URL重定向

    转载:https://blog.csdn.net/kiyoometal/article/details/90698761 重定向原理 HTTP 协议的重定向响应的状态码为 3xx .浏览器在接收到重定 ...

  4. node.js 和 npm/cnpm/nrm 的安装

    node.js 和 npm/cnpm/nrm 的安装 安装 node.js.去 官网 下载,下载 LTS 版本的.安装时一路点确定,不要改动任何设置. 在 git-bash 或是 cmd 下,输入 n ...

  5. Android开发之《内存对齐》

    为什么要进行内存对齐以及对齐规则:http://www.cnblogs.com/jijiji/p/4854581.html 1. 在32位系统中定义变量最好用int,因为这样效率高.原因就在于32位的 ...

  6. 常见PHP安全网站漏洞及防范措施

    一:常见PHP安全网站漏洞 对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍. 1.se ...

  7. R的基础数据结构

  8. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  9. jQuery2.0.0版本以后不再支持ie8的原因

    在引用jQuery时,引用高版本的Jq会在IE8下报错,在网上查了一下,jq在2.0+的版本就已经放弃对ie8的支持了.之前没有仔细研究过jq版本,借此机会去看了一下jq版本的知识.一.如何查看jq的 ...

  10. 重大改革!Python,最接近人工智能的语言~将被加入高考科目!

    就在前几天,和一位浙江省高校的信息技术老师聊天,我得到了一个震惊的消息: 明年,浙江省信息技术教材将不会在使用晦涩难懂的VB语言,而是改学更简单易懂的Python语言.也就是说, Python语言将纳 ...