详解vue-cli中配置sass


Posted in Javascript onJune 21, 2017

如何配置sass

一、安装对应依赖node模块:

npm install node-sass --save-dev

npm install sass-loader --save-dev

二、打开webpack.base.config.js在loaders里面加上

rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 }

三、在用scss的地方写上

<style lang="scss" scoped="" type="text/css"></style>

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

Javascript 相关文章推荐
jquery 触发a链接点击事件解决方案
May 02 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
小程序调用微信支付的方法
Sep 26 Javascript
详细分析React 表单与事件
Jul 08 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
详解如何在vue中使用sass
Jun 21 #Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 #Javascript
JS图片预加载插件详解
Jun 21 #Javascript
解决Extjs下拉框不显示的问题
Jun 21 #Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 #Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 #Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
Prototype框架详解
2015/11/25 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python实现AES加密解密
2019/03/28 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
产品生产计划书
2014/05/07 职场文书
社区党建工作方案
2014/06/10 职场文书
大学计划书范文800字
2014/08/14 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年电信员工工作总结
2015/05/26 职场文书