前言
目前公司的一个react项目，通过create-react-app的方式创建，css通过scss来写，第三方UI组件库为antd，由于antd的样式使用的是less来写的，所以就考虑如何在对原有项目不做大的改动，同时支持scss和less两种css预编译语言。
1. 支持scss，参考create-react-app官方文档
yarn add sass sass-loader
2. 通过craco来重写react-scripts的webpack配置
- 安装@craco/craco
$ yarn add @craco/craco
# OR
$ npm install @craco/craco --save
- 然后在项目根目录下创建一个
craco.config.js文件
module.exports = {}
- 修改package.json里项目的启动命令：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
3.安装craco-less
$ yarn add craco-less
# OR
$ npm i -S craco-less
4. 修改craco.config.js文件
const CracoLessPlugin = require('craco-less')
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
],
}
到现在为止，我们的项目就可以同时支持scss和less预编译语言了。
但是这样还不够！
在antd中内置了许多less常量，例如像颜色、边距、阴影等等，我们其实是希望改变这些常量，以便能够符合我们自己项目的UI主题。
5. 修改less常量，antd的less常量可以参考这个
- 在根目录中添加theme.js
const theme = {
'@text-color': '#272e42',
'@disabled-color': '#9DA0AA'
}
module.exports = theme
- 修改
craco.config.js文件
const CracoLessPlugin = require('craco-less')
const theme = require('./theme')
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: theme,
javascriptEnabled: true,
},
},
},
}
],
}
这样的话就可以修改antd的less常量了
6. 同样的，我们也希望能够添加全局的scss样式定义，包括常量，mxins，函数等，并且能够在任意的scss文件中随时使用，不需要引入文件。为了实现这个目标，我们需要借助craco-sass-resources-loader
- 我们在src目录下创建theme.scss文件
- 安装craco-sass-resources-loader
$ yarn add -D craco-sass-resources-loader
# OR
$ npm install craco-sass-resources-loader --save-dev
- 修改
craco.config.js文件
const CracoLessPlugin = require('craco-less')
const sassResourcesLoader = require('craco-sass-resources-loader')
const theme = require('./theme')
module.exports = {
webpack: {
configure: (webpackConfig, {env, paths}) => {
webpackConfig.output = {
...webpackConfig.output,
publicPath: process.env.NODE_ENV == 'production' ? '/' : '/',
}
return webpackConfig
},
},
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: theme,
javascriptEnabled: true,
},
},
},
},
{
plugin: sassResourcesLoader,
options: {
resources: './src/theme.scss',
},
},
],
}
总结
在本文中，我们通过一步步的设置，让create-react-app创建的项目同时支持了scss和less两种css预编译语言，同时我们也设置了如何更改antd的样式常量，以及scss的全局样式和常量，希望能够对大家有所帮助~
