让react支持less型文件夹:
1.第一步:在开发环境中安装react-app-rewiredcustomize-cra less less-loader;
2.第二步,安装然后在根目录下创建一个名为config-overrides.js的文件夹,配置信息如下:
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
const addLessLoader = require('customize-cra-less-loader')
module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),//起别名,引入文件时用@符号代替../../这样的层级符号
}),
addLessLoader({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
}),
)
然后在package.json中讲script的内容改为:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
3.如果要在项目中引入antd,好像还要在开发环境中安装babel-plugin-import 然后在config-overrides.js中添加 代码儿
const{override,fixBabelImports}=require('customize-cra')
module.exports = override( fixBabelImports('import',
{ libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
//如果写成true,代表运用less
}) );