如何使用less，stylus等第三方预处理器
一、暴露webpack,安装less\less-loader依赖
在create-react-app创建的项目下是不支持less的，我们要使用less就需要在相关配置文件中配置。
关于less的需要找到两个文件webpack.config.dev.js和webpack.config.prod.js
可是，create-react-app创建的项目是看不到webpack相关的配置文件，所以需要先暴露出来，使用以下命令：
npm run eject
安装less相关依赖
yarn add less less-loader -D
二、修改webpack文件配置
修改config/webpack.config.js文件配置
// 第一处是找到 // style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
+ const lessRegex = /\.less$/
+ const lessModuleRegex = /\.module\.less$/
// 第二处是增加 `less-loader`的配置,仿照sass来配置即可
module: {
...
{test: sassRegex...},
{test: sassModuleRegex..},
+++
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
}
+++
}
三、如需配置antd的按需加载
修改package.json：添加antd库的样式
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
四、如果需要定制antd的主题则需要修改webpack.config.js
找到约71行的getStyleLoaders方法,在约112行的判断追加配置
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
// modifyVars: {
// 'primary-color': '#1DA57A',
// 'link-color': '#1DA57A',
// 'border-radius-base': '2px',
// // or
// //'hack': `true; @import "your-less-file-path.less";`, // Override with less file
// },
// 上面是配置自定义主题，下面为开启js支持
javascriptEnabled: true,
},
}
);
}
最后这一步要修改package.json中的配置
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true // 修改为true则会加载less
}
]
]
}
相关连接
最近在学习react开发，整理几篇笔记方便自己查询使用，下面是连接地址
1.React 之 react-transition-group
2.React之 redux、react-redux、redux-thunk
