教程：create-react-app创建的项目同时支持scss

前言

目前公司的一个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的全局样式和常量，希望能够对大家有所帮助~