详解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编程开发中的五个实用小技巧
Jul 22 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php curl_init函数用法
2014/01/31 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php之可变函数的实例详解
2017/09/13 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
js实现随机点名功能
2020/12/23 Javascript
python写一个md5解密器示例
2018/02/23 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python如何调用JS文件中的函数
2019/08/16 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
python中format函数如何使用
2020/06/22 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
工厂采购员岗位职责
2014/04/08 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书