前言
目前公司的一個(gè)react項(xiàng)目富蓄，通過create-react-app的方式創(chuàng)建慢逾，css通過scss來寫，第三方UI組件庫為antd侣滩，由于antd的樣式使用的是less來寫的，所以就考慮如何在對原有項(xiàng)目不做大的改動(dòng)寝志，同時(shí)支持scss和less兩種css預(yù)編譯語言策添。
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
- 然后在項(xiàng)目根目錄下創(chuàng)建一個(gè)
craco.config.js文件
module.exports = {}
- 修改package.json里項(xiàng)目的啟動(dòng)命令：
"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,
},
},
},
},
],
}
到現(xiàn)在為止乐导，我們的項(xiàng)目就可以同時(shí)支持scss和less預(yù)編譯語言了物臂。
但是這樣還不夠产上！
在antd中內(nèi)置了許多l(xiāng)ess常量，例如像顏色晋涣、邊距、陰影等等规丽，我們其實(shí)是希望改變這些常量撇贺，以便能夠符合我們自己項(xiàng)目的UI主題。
5. 修改less常量松嘶，antd的less常量可以參考這個(gè)
- 在根目錄中添加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，函數(shù)等傲绣，并且能夠在任意的scss文件中隨時(shí)使用巩踏，不需要引入文件。為了實(shí)現(xiàn)這個(gè)目標(biāo)菠净，我們需要借助craco-sass-resources-loader
- 我們在src目錄下創(chuàng)建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',
},
},
],
}
總結(jié)
在本文中毅往，我們通過一步步的設(shè)置在讶，讓create-react-app創(chuàng)建的項(xiàng)目同時(shí)支持了scss和less兩種css預(yù)編譯語言，同時(shí)我們也設(shè)置了如何更改antd的樣式常量构哺，以及scss的全局樣式和常量，希望能夠?qū)Υ蠹矣兴鶐椭鷡
