项目搭建好之后

  1. 安装sass 依赖包

    npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass
  2. 在build文件夹下的webpack.base.conf.js的rules里面添加配置
    {
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
    }

  3. 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法
    <style lang="scss" scoped>
    
    </style>

在运行时可能会出现在Module build failed: TypeError: this.getOptions is not a function这个错误

这个是sass-loader版本问题,降低版本可解决问题,直接使用一下命令降低版本号

npm install sass-loader@7.3.1 --save-dev

后面可能还会出现问题Module build failed: Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

这个是node-sass的版本问题,6.0版本和4.0版本不兼容,

使用命令降低版本

npm install node-sass@4.14.1 --save-dev

然后就可能正常使用scss了

打开设置(首选项),切换到工作区(只适用此项目),找到在settings.json中编辑点击。也可以使用快捷键搜索生成settings.json文件

然后在json文件中添加

"files.associations": {
"*.vue": "vue"
},

这样就能支持scss语法了,但是这样之后不会自动补全html标签,解决这个问题需要在json文件中再添加

// tab键触发emmet快捷生成
"emmet.triggerExpansionOnTab": true,

输入标签后连按tab键即可补全标签

在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)的更多相关文章

  1. Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...

  2. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  3. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  5. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  6. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  7. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  8. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  9. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  10. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

随机推荐

  1. c#RSA 私钥加签公钥解签

    /// RSA签名 /// </summary> /// <param name="data">待签名数据</param> /// <pa ...

  2. Envoy:TLS双向认证

    环境准备 主机 角色 数量 front-envoy front envoy 1 service envoy 作为内部后端的envoy 2 end 后端应用程序 2 访问 / front-envoy = ...

  3. [bug] Flask css 不更新

    参考 https://blog.csdn.net/weixin_30454481/article/details/97108510

  4. [刷题] 349 Intersection of Two Arrays

    查找问题 查找有无(只有键) 元素'a'是否存在 set(集合) 查找对应关系(键值对应) 元素'a'出现了几次 map(字典) set和map的底层实现是红黑树 常见操作 insert() find ...

  5. [转载]好好好centos7 安装 KVM

    centos7 安装 KVM  2019-04-03 09:58:24     34     0     0 一.基础环境准备 centos7.X 最小环境安装 关闭selinux # vi /etc ...

  6. 查看 swappiness 值

    Swap的使用频率  发表于 2017-06-02 |  分类于 Linux |  评论数: 通过调整swappiness的值, 可以调整系统使用 swap 的频率 该值越小, 表示越大限度的使用物理 ...

  7. 【转载】CentOS 7 系统区域(语言)和键盘设置

    CentOS 7 系统区域(语言)和键盘设置   即使是在window中,平常说的语言设置这一项也是归类为系统区域,CentOS可以通过修改/etc/locale.conf配置文件或使用localec ...

  8. 在虚拟机中安装 Ubuntu

    https://www.cnblogs.com/huohu121/p/12250869.html 火狐python 博客园 首页 新随笔 联系 订阅 管理 随笔 - 54  文章 - 0  评论 - ...

  9. 有关fgets和fcntl的讨论-待整理更新

    问题引出 一个client程序:select 超时监听 sockfd套接字 和 STDIN_FILENO标准输入:若sockfd可读则接收server报文:若标准输入可读(按下回车),则开始用fget ...

  10. 项目实践之工作流引擎基本文档!Activiti工作流框架中流程引擎API和服务详解

    流程引擎的API和服务 流程引擎API(ProcessEngine API)是与Activiti打交道的最常用方式 Activiti从ProcessEngine开始.在ProcessEngine中,可 ...