React支持dart-scss

野性酷女 2022-09-11 00:27 113阅读 0赞

背景  
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别名配置