如何在create-react-app中使用sass

从create-react-app官方文档中我们可以看出其暂时还不支持直接导入LESS或Sass。但是通过一些配置，我们是可以在官方脚手架中使用sass/scss/less的。

以下是官方文档中相关部分的译文，这里是原文。

译文：

添加CSS预处理器（SASS，LESS等）

通常，我们建议您不要在不同的组件之间重复使用相同的CSS类。例如，我们建议您创建一个具有自己的.Button样式的类似<AcceptButton>和<RejectButton>可以呈现（但不是继承）出的功能的<Button>组件，而不是在<AcceptButton>和<RejectButton>组件中直接使用.Button CSS类。

通过这条规则可以看出CSS预处理器好像不太有用，因为这些功能可以被拥有诸如混合和嵌套之类的功能的组件所替代。当然，如果您发现它有价值，当然可以集成CSS预处理器。下面，我们将使用Sass来演示，同样您也可以使用Less或别的选择。

首先，我们来安装Sass的命令行界面：

npm install node-sass-chokidar --save-dev

然后在package.json中，将以下行添加到scripts中：

   "scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

Note：在使用不同的预处理器时，请根据预处理器的文档替换build-css和watch-css命令。

现在，您可以将src/App.css重命名为src/App.scss并运行npm run watch-css。watch-css将在src子目录中找到每个Sass文件，并在其旁边创建一个相应的CSS文件，在我们的例子中覆盖src/App.css。由于src/app.js仍然 improt src/App.css，所以样式同样成为您的应用程序的一部分。您现在可以编辑src/App.scss，同时会生成相应的src/App.css。

要在Sass文件之间共享变量，您可以使用Sass导入。例如，src/App.scss和其他组件样式文件可以通过@import “./shared.scss”;来实现变量的定义共享。

要在不使用相对路径的情况下导入文件，可以在package.json中的命令中添加--include-path选项。

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",

这样可以让您像以下这样导入

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

此时，您可能想从源代码控件中移除所有的CSS文件，于是您可以将src/**/*.css添加到.gitignore文件中来实现。将构建的文件保留在源代码控制之外是一个很好的做法。

作为最后一步，您可能会发现使用npm start自动运行watch-css，同时将运行build-css作为npm run build的一部分会更加方便。您可以使用&&运算符顺序执行两个脚本。但是，并行运行两个脚本没有跨平台的方式，所以我们将为此安装一个包：

npm install --save-dev npm-run-all

然后，我们可以改变scripts中的start和build来包括CSS预处理器命令：

   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

现在运行run npm和npm run build同样构建了Sass文件。

为什么使用 node-sass-chokidar?

通过Issues中的反映我们发现node-sass具有以下问题：

• 在某些情况下，node-sass -watch被报告在某些情况下会出现性能问题，包括在虚拟机中或使用docker时出现。
• 无限样式编译 #1939
• node-sass被报告在检测目录中的新文件时出现问题#1891

所以node-sass-chokidar在这里用于解决这些问题。