详解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 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php session 写入数据库
2016/02/13 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python的依赖管理的实现
2019/05/14 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
基于python实现模拟数据结构模型
2020/06/12 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
个人现实表现材料
2014/02/04 职场文书
医药营销个人求职信
2014/04/12 职场文书
体育运动会广播稿
2014/10/05 职场文书
升学宴学生答谢词
2015/01/05 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
导游词幽默开场白
2019/06/26 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Python常遇到的错误和异常
2021/11/02 Python