详解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下string.format函数补充
Aug 24 Javascript
js Function类型
Dec 04 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue插件打包与发布的方法示例
Aug 20 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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全局变量和类配合使用深刻理解
2013/06/05 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
javascript的函数作用域
2014/11/12 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
JS实现星星海特效
2019/12/24 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python各种扩展名区别点整理
2020/02/27 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
党员违纪检讨书
2014/02/18 职场文书
高中生职业规划范文
2014/03/09 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
护士找工作求职信
2014/07/02 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年仓库工作总结
2015/04/09 职场文书
校运会加油稿大全
2015/07/22 职场文书
信息技术研修心得体会
2016/01/08 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android