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

WEB前端 waitig 598℃ 百度已收录 0评论

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

本文由【waitig】发表在等英博客
本文固定链接:在vue项目中使用Sass/Scss(视窗环境)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (1)分享 (0)