详解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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
js实现全选和全不选
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
DC动漫人物排行
2020/03/03 欧美动漫
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
js对数字的格式化使用说明
2011/01/12 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python实现购物车功能的方法分析
2017/11/10 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
土木工程应届生求职信
2013/10/31 职场文书
教师自我鉴定范文
2013/11/10 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
和谐社区口号
2014/06/19 职场文书
社保委托书怎么写
2014/08/02 职场文书
自考生自我评价
2019/06/21 职场文书