在vue项目中使用Sass/Scss(视窗环境)

第一步: 安装Ruby

1. 在使用Sass前,我们需要先安装Ruby。以上安装方法可以为我们快速设置好必要的设置，我们只需下载安装包，随后一切默认安装即可。
2. 安装程序也将安装一个Ruby命令行powershell应用程序，它可以让我们使用Ruby库。

—————————————————————————————————

第二步: 安装Sass

1. 使用命令行安装,如cmd,git或者Ruby终端. 博主使用git初始化项目,所以这里也是用的git。
2. 安装使用以下命令:

 npm install --save-dev sass-loader
 //sass-loader依赖于node-sass
 npm install --save-dev node-sass   

或者简写形式:

npm install sass-loader node-sass --save

注意: 以上适用于Scss的语法，使用Sass语法安装vue-loader

SCSS 与 Sass 异同 请参考Sass中国网站

1 现在我们可以检查一下Sass是否成功安装:

sass -v

2 安装成功应该有这个界面：

3 如果显示安装失败,命令行运行以下命令:

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

—————————————————————————————————

第三步: 在vue中使用Sass

• 到这里只需要改写vue文件中的style标签即可。

    <style lang="scss"></style>
    <style lang="sass"></style>