详解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 相关文章推荐
JS性能优化笔记搜索整理
Aug 21 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
JavaScript如何实现图片处理与合成
May 29 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解python中的模块及包导入
2019/08/30 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
JAVA和C++的区别
2013/10/06 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
《燕子专列》教学反思
2014/02/21 职场文书
三好学生评语大全
2014/12/29 职场文书
银行给客户的感谢信
2015/01/23 职场文书
同学聚会邀请函
2015/01/30 职场文书
海上钢琴师观后感
2015/06/03 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书