详解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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
jstree的简单实例
Dec 01 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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
加速XP搜索功能堪比vista
2007/03/22 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
深入php内核之php in array
2015/11/10 PHP
PHP钩子实现方法解析
2019/05/21 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python代码编写计算器小程序
2020/03/30 Python
利用python汇总统计多张Excel
2020/09/22 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
爱心倡议书范文
2014/05/12 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
政风行风建设整改方案
2014/10/27 职场文书
员工评语范文
2014/12/31 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2015年司法局工作总结
2015/05/22 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python