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;
}然后编译器报错了！！！
语法问题，等我把中括号和分号去掉之后，报错消失了，好迷茫
虽然正常显示和使用了，但是对于为什么用了中括号和分号会报错，还需要进行下一步的探究，这一次就先到这里，有结果再进一步补充。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下2018-10-10
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传,这篇文章主要介绍了elementui上传文件不允许重名,需要的朋友可以参考下2024-02-02
Vue中使用event的坑及解决event is not defined
这篇文章主要介绍了Vue中使用event的坑及解决event is not defined,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Vue项目中引入 ECharts，ECharts是一个强大的画图插件，在vue项目中，我们常常可以引用Echarts来完成完成一些图表的绘制；以下介绍vue项目中引用并使用ECharts，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
这篇文章主要介绍了在vue中使用axios实现post方式获取二进制流下载文件的相关资料,需要的朋友可以参考下2019-12-12
文章介绍了如何在包含父表单和多个子表单的场景中,通过滚动方法实现提交时的校验机制,确保数据完整性与用户操作体验2025-07-07
这篇文章主要介绍了如何将百度地图包装成Vue的组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
用多了 JQuery ，习惯了使用JQuery的API操作 DOM ，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，小编给大家分享Vue实现图片与文字混输效果，感兴趣的朋友一起看看吧2019-12-12
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。2017-03-03
最新评论