在create-react-app中引入scss

本文是基于create-react-app的，如果尚未安装，请按以下命令进行安装：

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

我当前的版本是create-react-app@3.1.2，会根据该版本来进行scss相关的配置。

如何查看create-react-app版本？
通过C:\Users\xxx\AppData\Roaming\npm\node_modules\create-react-app\package.json这个目录下的package.json即可查看。

1.安装sass-loader和node-sass依赖

npm install sass-loader node-sass --save-dev

因为create-react-app已经默认已经添加了scss/sass对应的loader，所以在安装完之后就可以在项目中使用scss了，详见配置可以参考\node_modules\react-scripts。

2.全局配置scss变量/函数

在用scss预处理器的时候，会常用变量/函数/混合等功能。目前如果想要使用变量/函数的话需要在每个文件中单独引入，这样明显不合理，我们需要的是引入一次，所以我们就需要定义全局主题的样式变量，也就是利用sass-resources-loader这个loader将scss变量打包到每个文件中。首先我们要安装sass-resources-loader。

npm install --save-dev sass-resources-loader

一、在暴露配置文件情况下配置

这里的话如果开启npm run eject，暴露配置文件的话，可以在scss的loader里进行添加。

{
    test: /\.scss$/,
    use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        },
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可
                    path.resolve(__dirname, './../src/assets/scss/output.scss')
                ]
            }
        }
    ]
}

虽然暴露配置文件的做法可以根据自己的需要添加更多元化的配置，但是因为该操作是不可逆的，主要原因有以下几点：

• 无法体验create-react-app更新后带来的功能。因为你配置是自定义的，就算更新后也不会覆盖eject后的配置。
• 增加代码维护的成本。create-react-app本意就是为了让用户专注开发而忽略配置，在eject之后，会多出很多配置文件，并且会发现在package.json里加了很多依赖，对于有代码洁癖或者新人同学显得不友好。

二、在不暴露配置文件情况下配置（推荐）

在项目根目录，也就是和package.json同级创建config-overrides.js文件，该文件配置代码如下：

const { override, adjustStyleLoaders } = require("customize-cra");
module.exports = override(
  // ...其他配置...
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes("scss")) {
      rule.use.push({
        loader: require.resolve("sass-resources-loader"),
        options: {
          resources: "./src/assets/scss/output.scss" //这里是你自己放公共scss变量的路径
        }
      });
    }
  })
);

重启项目即可。