create-react-app+TS+antd+less配置——less-loader 6.0之后的配置

最新推荐文章于 2023-09-26 12:19:35 发布

安鑫的学术空间

最新推荐文章于 2023-09-26 12:19:35 发布

阅读量888

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js less javascript

本文链接：https://blog.youkuaiyun.com/weixin_44985089/article/details/122088183

本文介绍如何在React项目中使用create-react-app初始化项目，并安装配置Ant Design及LESS，包括LESS加载器的正确配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建项目
a.全局安装create-react-app

npm install create-react-app -g

b.创建自己的项目

npx create-react-app my-projectName

b1.创建支持TypeScript的react项目

npx create-react-app my-projectName --template typescript

c.暴露项目的配置。注：单向操作不可逆

npm run eject

二、安装antd

npm install -S antd

三、安装less、less-loader

npm install -S less less-loader

四、webpack中配置Less

在第二步的时候我们已经打开了config中webpack的配置，打开 config 文件夹，修改 webpack.config.js
搜索 cssRegex ，找到后添加两行代码

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

3.修改 getStyleLoaders 函数，添加代码

//lessOptions必须有
const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
   
   
const loaders = [
	isEnvDevelopment && require.resolve('style-loader'),
	isEnvProduction && {
   
   
	  loader: MiniCssExtractPlugin.loader,
	  options: shouldUseRelativeAssetPaths ?