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 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
理解javascript正则表达式
Mar 08 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
浅谈Python中的闭包
2015/07/08 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python如何计算语句执行时间
2019/11/22 Python
django API 中接口的互相调用实例
2020/04/01 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python实现简单文件读写函数
2021/02/25 Python
营销与策划应届生求职信
2013/11/04 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
连带责任保证书
2014/04/29 职场文书
表彰大会策划方案
2014/05/13 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
对讲机的最大通讯距离是多少
2022/02/18 无线电