vue2配置scss的方法步骤


Posted in Javascript onJune 06, 2019

1、安装文件

npm install --save-dev sass-loader
npm install --save-dev node-sass

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

...
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
},
...

注意:这里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下写法

<style lang="scss" scoped>
  div {
    a {
      color: red
     }
    }
</style>

2、@import外部导入,如果不加scoped如果在app.vue中导入那么就是全局scss

<style lang="scss" scoped>
 @import './assets/scss/global.scss';
 * {
  color: red
 }
</style>

这样写下面的覆盖外部引入的

注意遇到的坑

报错

/node-sass/vendor no such file or directory in node-sass......

解决方法,运行 rebuild解决了

npm/cnpm rebuild node-sass --save-dev

更详细的解决方案如下:

根据package.json,进行npm install node_modules, 运行npm run dev时候,报错,错误如下.

vue2配置scss的方法步骤

查看node_modules文件夹,发现,并无vender 文件夹.如下图:

vue2配置scss的方法步骤

解决办法:

上图node-sass文件夹下,新建 vender 文件夹.然后运行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夹,如下图所示:

vue2配置scss的方法步骤

就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
ES6 十大特性简介
Dec 09 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 #Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
js常见遍历操作小结
Jun 06 #Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 #Javascript
vue中的过滤器实例代码详解
Jun 06 #Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
You might like
在PHP中使用模板的方法
2008/05/24 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
深入理解Node module模块
2018/03/26 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python列表推导式的使用方法
2013/11/21 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python爬虫之百度API调用方法
2017/06/11 Python
python简单实例训练(21~30)
2017/11/15 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python3爬虫中异步协程的用法
2020/07/10 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
学习十八大精神心得体会
2013/12/31 职场文书
机关财务管理制度
2014/01/17 职场文书
公司承诺书格式
2014/05/21 职场文书
质量主管工作职责
2014/09/26 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书