详解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 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php使用websocket示例详解
2014/03/12 PHP
php制作文本式留言板
2015/03/18 PHP
php给图片加文字水印
2015/07/31 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python的一些用法分享
2012/10/07 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
医学专业应届生的自我评价
2014/02/28 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
公司会议开幕词
2015/01/29 职场文书
倡议书范文大全
2015/04/28 职场文书
中学教师读书笔记
2015/07/01 职场文书
关于python中模块和重载的问题
2021/11/02 Python