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,实现插入排序实现代码
Jul 31 Javascript
浅析js封装和作用域
Jul 09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
require.js中的define函数详解
Jul 10 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 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使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
JS之相等操作符详解
2016/09/13 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
Python装饰器用法实例总结
2018/05/26 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python 定义只读属性的实现方式
2020/03/05 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
使用索引有什么好处
2016/07/27 面试题
好的自荐信的要求
2013/10/30 职场文书
车工岗位职责
2013/11/26 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
纯html+css实现Element loading效果
2021/08/02 HTML / CSS