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实现网站访问次数统计代码
Aug 12 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
Vue动态组件实例解析
Aug 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
js实现简易计算器功能
Oct 18 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python random模块常用方法
2014/11/03 Python
Python新手实现2048小游戏
2015/03/31 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python 加密与解密小结
2018/12/06 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
快速了解Python开发环境Spyder
2020/06/29 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
《月迹》教学反思
2014/02/19 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
奖学金感谢信
2015/01/21 职场文书
推广普通话主题班会
2015/08/17 职场文书