很多人都在问yarn是什么,如果你知道npm是什么 那我能告诉你yarn是跟npm/cnpm一样的包管理工具,只是它比npm更加优秀,更加稳定。
暴露webpack.config文件,依次执行以下代码:
//暴露package.json中的script中的eject文件
yarn eject
//命令行会问你:这是一个单向操作,确认操作后不可逆转/返回。
y
//但是会报错: 原因是没有提交代码,那么就在GitHub网站上创建一个代码库 提交上去即可
//在此运行以上命令
//此刻你的 demo-items文件夹中就会多了一个 config文件夹
//当你运行项目的时候你会发现报错 : 缺少@babel/plugin-syntax-json-strings文件
//执行命令
yarn add @babel/plugin-syntax-json-strings
打开文件夹中的webpack.config.js
下面添加webpack解析less文件
//安装less模块 执行以下命令
yarn add less
//在webpack.config.js中css解析之前添加以下代码:
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader:require.resolve('css-loader'),
options:{
importLoaders: 1
},
},
{
loader:require.resolve('postcss-loader'),
options:{
ident:'postcss',
plugins:()=>[
require('postcss-flexbugs-fixes'),
]
}
},
{
loader:require.resolve('less-loader')
}
]
},
这样config文件暴露,我们就可以安装自己要的项目架构了,下篇文章讲解antd UI组件安装、按需加载、定制主题色。