VUE项目中SASS的使用及说明

 更新时间:2023年06月08日 08:34:12   作者:石榴笑了  
这篇文章主要介绍了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官网的基础入门教程的,基本的使用说得很详细,传送门:

https://www.sass.hk/guide/

在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;
}

然后编译器报错了!!!

语法问题,等我把中括号和分号去掉之后,报错消失了,好迷茫

虽然正常显示和使用了,但是对于为什么用了中括号和分号会报错,还需要进行下一步的探究,这一次就先到这里,有结果再进一步补充。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2中使用SSE(服务器发送事件)原因分析

    vue2中使用SSE(服务器发送事件)原因分析

    SSE是围绕只读Comet交互推出的API或者模式,SSE 支持短轮询、长轮询和HTTP 流,而且能在断开连接时自动确定何时重新连接,本文重点给大家介绍
    2023-10-10
  • vue实现codemirror代码编辑器中的SQL代码格式化功能

    vue实现codemirror代码编辑器中的SQL代码格式化功能

    这篇文章主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue如何修改data中的obj数据的属性

    vue如何修改data中的obj数据的属性

    这篇文章主要介绍了vue如何修改data中的obj数据的属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 将Vue组件库更换为按需加载的方法步骤

    将Vue组件库更换为按需加载的方法步骤

    这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue在页面数据渲染完成之后的调用方法

    Vue在页面数据渲染完成之后的调用方法

    今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VuePress 侧边栏的具体使用

    VuePress 侧边栏的具体使用

    本文主要介绍了VuePress 侧边栏的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 轻量级富文本编辑器wangEditor结合vue使用方法示例

    轻量级富文本编辑器wangEditor结合vue使用方法示例

    在我们项目中,有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • Vue Computed底层原理深入探究

    Vue Computed底层原理深入探究

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-08-08
  • Vue实现商品放大镜效果

    Vue实现商品放大镜效果

    这篇文章主要为大家详细介绍了Vue实现商品放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue 代码压缩优化方式

    vue 代码压缩优化方式

    这篇文章主要介绍了vue 代码压缩优化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论