React大屏脚手架作者西西子
作者: 小周 Fri Dec 01 03:35:48 SGT 2023
阅读(101)
create-react-app初始化#使用了create-react-app的typescript模板yarncreatereact-appmy-big-screen--templatetypescript#初始化之后进入my-big-screen文件目录下执行yarnstart#localhost:3000就能看到react的hello页面了2.引入antdUI库#在根目录下yarnaddantd3.使用craco插件来自定义配置安装cracoyarnadd@craco/craco修改package.json文件如下#原本"scripts":{"start":"react-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest","eject":"react-scriptseject"}#修改之后"scripts":{"start":"cracostart","build":"cracobuild","test":"cracotest","eject":"cracoeject"}在根目录添加craco.config.js文件module.exports={}4.自定义antd主题，使用less作为css预处理器安装craco-antdyarnaddcraco-antd修改craco.config.js文件constCracoAntDesignPlugin=require('craco-antd');module.exports={plugins:[{plugin:CracoAntDesignPlugin,options:{customizeTheme:{'@primary-color':'#1DA57A',},},},],};5.使用craco-less.module.less来模拟vue组件中style的scope功能craco-less依赖已经内置在@craco/craco依赖中，无需主动安装配置craco.config.js文件constCracoAntDesignPlugin=require('craco-antd')constCracoLessPlugin=require('craco-less')const{loaderByName}=require('@craco/craco')module.exports={plugins:[{plugin:CracoAntDesignPlugin,options:{customizeTheme:{'@primary-color':'#1DA57A'}}},{plugin:CracoLessPlugin,options:{modifyLessRule(lessRule,context){//Youhavetoexcludethesefilesuffixesfirst,//ifyouwanttomodifythelessmodule'ssuffixlessRule.exclude=/\.m\.less$/returnlessRule},modifyLessModuleRule(lessModuleRule,context){//ConfigurethefilesuffixlessModuleRule.test=/\.m\.less$///Configurethegeneratedlocalidentname.constcssLoader=lessModuleRule.use.find(loaderByName('css-loader'))cssLoader.options.modules={localIdentName:'[local]_[hash:base64:5]'}returnlessModuleRule}}}]}配置*./src/react-app-env.d.ts*文件///hello