本文已参与「新人创作礼」活动，一起开启掘金创作之路
背景
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安装依赖解决~
