7.scss编译成css的两种方法及问题

一、dart-sass 编译

dart-sass是最方便的sass编译工具，也是官方目前主推的工具

1.安装

# 全局安装
npm install -g sass
# 查看版本
sass --version

2.使用

进入到scss文件所在目录下，执行sass [sassname.scss] [cssname.css],例子如下：

sass main.scss output.css

3.问题

我之前一直使用该方法，编译sass文件，直到最近换了新电脑，重新安装了最新版的dart-sass，再编译之前写过的代码，发现字体文件怎么也加载不出来，经过一番努力排查，发现之前写的此类代码

.icon-twitter:before { content: "\e600"; }

被编译成了?

.icon-book:before {
  content: "";
}

从网上查到，不止我一个人遇到了这个问题，在github上有两个issues都在进行激烈的讨论

vue-element-admin

dart-sass
由于英语不是很精通，大致读了一下，说这个并不算BUG，而是我之前的那种写法不标准，并不被最新的sass语法支持，但是毕竟项目已经开发很长时间了，这种写法遍地都是，挨个改肯定是不可能，而且这个问题不算BUG的话，也不要指望在新版本中修复。

于是又经过了一个晚上的艰苦战斗，终于发现node-sass@6.0仍然支持我过去的写法。

二、node-sass 编译

1.安装

参考链接：安装node-sass正确姿势

1.1.npm或yarm指定淘宝镜像

查看镜像

# npm命令
npm config get registry
# yarn命令
yarn config get registry

修改为淘宝镜像

# npm命令
npm config set registry http://registry.npm.taobao.org/
# yarn命令
yarn config set registry http://registry.npm.taobao.org/

此时，正常情况再安装node-sass都可以成功，如果安装还报错，则进入下面第二步。安装编译windows平台编译环境

1.2.安装windows平台编译环境（需要在管理员权限下安装）

npm install -g node-gyp
npm install --global --production windows-build-tools

1.3.当然也可在项目目录下临时安装指定node-sass为镜像淘宝

npm install -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

以上三步，基本保证node-sass安装成功！

2.使用

使用方法和dart-sass一样

node-sass main.scss output.css