详解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 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
微信小程序纯文本实现@功能
Apr 08 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框架codeigniter中如何使用框架的session
2013/06/24 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
js实现弹窗效果
2020/08/09 Javascript
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
小学教师自我鉴定
2013/11/07 职场文书
四群教育工作实施方案
2014/03/26 职场文书
毕业生工作求职信
2014/06/30 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
金秋助学感谢信
2015/01/21 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android