vue2项目使用sass的示例代码


Posted in Javascript onJune 28, 2017

1,使用save会在package.json中自动添加。

npm install node-sass --save-dev

npm install sass-loader --save-dev

注:

通常使用npm安装会出现以下报错,安装失败。(网路问题)

vue2项目使用sass的示例代码

可以通过淘宝的npm镜像安装node-sass,解决以上问题。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)

$ cnpm install node-sass --save (使用淘宝镜像安装node-sass)

2.进入webpack.base.config.js 配置scss   module -- loaders (vue1.0)

$ npm install --save-dev sass-loader style-loader css-loader
{

 test: /\.vue$/,

 loader: 'vue-loader',

 options: {

  loaders: {

  'scss': 'style-loader!css-loader!sass-loader'

  }

 }

 }

打开webpack.base.config.js在loaders里面加上  module -- rules (vue2.0)

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]')

  }

  }

 ]

 }

3.如果需要在vue文件style标签使用scss的话,需要声明一下:

vue1.0

<style rel="stylesheet/scss" lang="scss"></style>

vue2.0

<style lang="scss" scoped="" type="text/css"></style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
js常用DOM方法详解
Feb 04 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 #Javascript
详解webpack+angular2开发环境搭建
Jun 28 #Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 #Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 #Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 #Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 #Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python字符串替换的2种方法
2014/11/30 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
override和overload的区别
2016/03/09 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
几个常见的软件测试问题
2016/09/07 面试题
材料采购员岗位职责
2013/12/17 职场文书
英文推荐信格式范文
2014/05/09 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
高中社区服务活动报告
2015/02/05 职场文书
停电调休通知
2015/04/16 职场文书
人与自然观后感
2015/06/16 职场文书
法制主题班会教案
2015/08/13 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android