React支持dart-scss

背景
node-sass下载速度慢，甚至下载报错。本地编译速度慢。而官方极力推荐使用Dart-sass，Dart运算速度快、易于安装
所以希望在React项目中使用dart-scss。

使用步骤：
命令行安装

yarn add dart-sass

安装成功后将css文件后缀修改为scss，结果报错告知使用node-scss。查了一下才知道React只支持node-scss不支持dart-scss。
于是google上输入create react app dart sass搜索研究，在github的create-react-app的issue下面发现：
发现别人使用了如下的神奇命令

npm install node-sass@npm:dart-sass
// 或
yarn add  node-sass@npm:dart-sass

或者在package.json配置，修改dependencies配置如下，也可行

"node-sass": "npm:dart-sass",
"dart-sass": "^1.19.0"

骗过react，以为我们安装的node-sass，实际内部安装的是dart-sass。在node_modules中确认如下：

原理是：package alias支持进行别名配置，减少引用的麻烦。

假设我们在assets目录下有一个global.scss，我们不想在pages在很深层次的目录中每次都要 …/…/…/assets/global.scss 地引用它。可以定义一个@assets别名，指向assets目录。
由于当前执行命令在xxx目录下，assets又在source里，于是其路径为

source/assets，
{
	“license”: “MIT”,
	“version”: “1.0.0”,
	“name”: “qunar”,
	“nanachi”: {
		“alias”: {
		“@assets”:“source/assets”
		}
	},
	“dependencies”: {
		“regenerator-runtime”: “^0.12.1”
	}
}

使用方式，我们在某一个页面(/pages/xxx/yyy/index.js)添加一个index.scss, 其位置为pages/xxx/yyy/index.scss

//index.js
import React from ‘@react’;
import ‘./index.scss’;
class P extends React.Component {
//略
}
export default P
//-------------- 略
//index.scss

@import ‘@assets/global.scss’ .aaa {//其他样式 color:red; }

另外，我安装完dart-sass，忽然index.tsx就报错了，import显示找不到‘react’模块。最后重新npm install安装依赖解决~

参考：github、alias别名配置