详解Vue2 添加对scss的支持


Posted in Javascript onJanuary 02, 2019

引入loader

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev

scss支持

为了使用scss,我们需要先安装相关的node包:

npm install --save style-loader sass-loader node-sass file-loader

安装好之后,为了可以在.vue和.scss中使用,需要在webpack.config.js中配置对应的解析器:

var webpack = require('webpack');
module.exports = {
  entry: ['./src/entry.js'],
  output: {
    path: __dirname,
    filename: 'build/main.js'
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },
  module: {
    loaders: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },{
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /\.(png|jpg|jpeg|gif|bmp)$/,
        loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
      }
    ]
  }
};

关于上面resolve的配置,是因为编译和打包源文件默认不一样。

测试scss

打开PageTwo.vue测试一下:

<style lang="scss" scoped>
section {
 & > div {
  font-size: 20px;
 }
}
</style>

编译正常。

本篇最终项目文件Github地址:github.com/yelloxing/vue.quick/tree/V6

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

Javascript 相关文章推荐
javascript 循环调用示例介绍
Nov 20 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
VUE脚手架具体使用方法
May 20 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
JavaScript ES6箭头函数使用指南
Dec 30 #Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 #Javascript
JavaScript事件对象深入详解
Dec 30 #Javascript
You might like
php全局变量和类配合使用深刻理解
2013/06/05 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
小程序hover-class点击态效果实现
2019/02/26 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
党员党性分析材料
2014/02/17 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
校园环保建议书
2014/05/14 职场文书
理财学专业自荐书
2014/06/28 职场文书
2015元旦节寄语
2014/12/08 职场文书
行政复议答复书
2015/07/01 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
Python中Permission denied的解决方案
2021/04/02 Python