create-react-app 脚手架添加 less 支持和 antd 样式按需加载
1. 创建项目
npm install -g create-react-app /* 安装create-react-app，建议使用cnpm */
create-react-app react-test /* 使用命令创建应用，myapp为项目名称 */
cd react-test /* 进入目录，然后启动 */
npm start
2.create-react-app 把 webpack 配置文件暴露出来
create-react-app 生成的项目文，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：
npm run eject
3. 添加 babel-plugin-import
babel-plugin-import 是一个用于 按需加载 组件代码和样式 的 babel 插件（原理）。
npm install babel-plugin-import --save-dev
4.添加 less 、less-loader
npm install less less-loader --save-dev
5.修改 webpack 配置文件
修改 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
}
],
},
6.修改 package.json 文件，添加 .babelrc 文件
package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},
.babelrc
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
然后就可以了，哈哈哈！
「如果这篇文章对你有用,请随意打赏」
Jacobc' Blog
如果这篇文章对你有用,请随意打赏
使用微信扫描二维码完成支付
