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

2017-11-26 19:06:06来源:CSDN作者:CXSY3402人点击

分享

第一步: 安装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>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台