VUE项目中SASS的使用及说明
最近在做vue脚手架搭建项目，下一步希望实现响应式布局，查找的资料说要实现vue的响应式布局，就要用到sass。
然后决定一步步来，先学习使用sass。
下载Ruby
安装sass之前必须先安装Ruby,Ruby下载的地址为：https://rubyinstaller.org/downloads/
找到适合自己电脑的版本下载就可以了。
安装Ruby
下载完Ruby的安装包之后，勾选“Add executables to your path” 选项，点击下一步（很多都会默认选择了这个选项）。
在安装的过程出现了要安装SYS的选项，我只是想要简单地使用一下Ruby来安装sass而已，所以并没有勾选这个选项，安装完发现不选这个选项并没有影响我使用sass。
安装sass
在命令行输入gem install
sass使用sass
我是看Sass官网的基础入门教程的，基本的使用说得很详细，传送门：
在vue使用sass
上面说的是sass的基本语法，最终目的还是要在vue中使用sass，但是我遇到了许多问题：
1.安装sass依赖包
npm install node-sass --save-dev npm install sass-loader --save-dev
直接安装node-sass报错，所以使用了淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像） $ cnpm install node-sass --save-dev （使用淘宝镜像安装node-sass）
一些教程说要进入webpack.base.config.js文件更改配置，我用的是最新的脚手架，所以根本就没有这个文件，其实好像安装的时候会自动配置好的，后来也能正确使用sass。
2.webstorm弹出提示询问要不要file watcher
我选择了no
3.在App.vue的style
style lang=‘sass'
4.在App的style中引入新建的sass文件
完成上面的一系列操作之后，怀着忐忑的心情在test.sass文件中放入以下代码：
$highlight-color: #F90
h1 {
color: $highlight-color;
}然后编译器报错了！！！
语法问题，等我把中括号和分号去掉之后，报错消失了，好迷茫
虽然正常显示和使用了，但是对于为什么用了中括号和分号会报错，还需要进行下一步的探究，这一次就先到这里，有结果再进一步补充。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue实现点击箭头上下移动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
vue select二级联动第二级默认选中第一个option值的实例
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue项目中使用crypto-js实现加密解密方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
el-select如何获取当前选中的对象所有(item)数据
在开发业务场景中我们通常遇到一些奇怪的需求,下面这篇文章主要给大家介绍了关于el-select如何获取当前选中的对象所有(item)数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue计时器的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了浅谈实现在线预览PDF的几种解决办法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在 Vue 中,异步组件是指那些在需要时才会被加载的组件,与传统的静态组件不同,异步组件通过动态加载的方式,可以有效地减少初始加载的资源和时间,在 Vue 中实现异步组件加载非常简单,开发者有多种方法可以做到,本文给大家介绍了一些常用的实现方法2024-11-11
在 Vue 3 中上传 KML 文件并在地图上显示的实现方法
KML 文件作为一种标准的地理数据格式,广泛应用于地理信息系统（GIS）中,通过 OpenLayers 和 Vue 3 的组合,您可以方便地实现地图数据的可视化和交互,本文介绍在 Vue 3 中上传 KML 文件并在地图上显示的实现方法,感兴趣的朋友一起看看吧2024-12-12
vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最新评论