第一次写react相关东西,如有错误,请大佬指点
想用react+antd做个练习,发现antd是基于less的方式开发的,但是初始化的脚手架是没有config这个文件的,想改配置去无从下手,在网上查了下资料,好几个是在webpack.config.dev.js中进行配置的,但是我下载的版本是最新的,在config文件夹下没有这个webpack.config.dev.js文件,最后找了资料发现了方法:
1 、首先需要暴露webpack配置 npm run eject,这个时候就会生成config和script两个文件夹
2、npm install less less-loader antd babel-plugin-import
3、在config/webpack.config.js文件中添加如下代码
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
添加如下代码 照葫芦画瓢
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在module/rules下添加 注意层级,不要弄错
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
在package.json中添加以下代码
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
然后npm run start 就可以运行了