详解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 操作Word和Excel的实现代码
Oct 26 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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的autoload机制的实现解析
2012/09/15 PHP
PHP中Array相关函数简介
2016/07/03 PHP
对联广告js flash激活
2006/10/19 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
环保专业大学生职业规划设计
2014/01/10 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
初中生物教学随笔
2015/08/15 职场文书
感谢师恩主题班会
2015/08/17 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL