在通过vue-cli安装了webpack-simple 后,就自动安装好vue-loader了,但此时若写了含有sass的.vue组件,运行npm run dev时会报错。此时,需要我们在webpack.config.js里对vue-loader进行更详细的配置,官网给出来了,当然我们只需一个scss即可,另一个sass不用管。

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}

  然后需要安装scss: 'vue-style-loader!css-loader!sass-loader' 里的各种loader,我们通过npm install --save -dev css-loader style-loader sass-loader vue-style-loader(似乎多写了一个,无所谓了)进行安装。运行npm run dev,可能还会报错,提示缺少依赖的node-sass,那我们接着npm install --save -dev node-sass即可。此时大功告成。

webpack的单vue组件(.vue)加载sass配置的更多相关文章

  1. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  2. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  3. vue组件重新加载(刷新)

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

  4. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  5. vue组件懒加载(Load On Demand)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...

  6. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  7. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  8. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  9. Vue 路由&组件懒加载(按需加载)

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.使用Vue路由懒加载和组件懒加载可以提升页面加载速度,减少白屏时间,提升用户体验. 用法有如下三种:(路由懒加载与组件懒加载用 ...

随机推荐

  1. Ubuntu 14.04安装teamviewer 远程桌面

    teamviewer 真是一款非常强大的远程登录软件,可以跨Windows和Ubuntu远程登录,但是在64bit的Ubuntu下安装时,按照官方安装方法总是会遇到问题,下面说一下如何安装: 安装i3 ...

  2. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  3. 关于db2的一点记录

    近期听搞db2的兄弟说:db2数据库软件的license 不区分平台(os). 先记下来.像db2这么高大上的软件,接触的机会是比較少的. 另外:db2 的license是须要打的,不打的话,超过一段 ...

  4. C语言主要做哪些方面的开发---一个来自“IT技术学习”微信群的问题及答复

    近期,在"IT技术学习"微信群中,有同学问了这样一个问题:C语言主要做哪些方面的开发?在这篇文章中,我想结合自身的经验,对这个问题进行下解答. C语言是计算机及其相关专业(如通信. ...

  5. js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键

    js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 一.总结 一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...

  6. Cocos2d-x使用Javascript开发js绑定C++&lt;代码演示样例&gt;

    class IOSiAPDelegate{ public: virtual ~IOSiAPDelegate() {} }; class IOSAlipay{ public: IOSAlipay(); ...

  7. matplotlib学习之函数积分图

    # coding:utf-8 import numpy as np from matplotlib import pyplot as plt from matplotlib.patches impor ...

  8. linux下如何获取某一进程占用的物理内存和虚拟内存

    首先,ps -A查看你所查看进程的进程号 ps -A 加入进程号为pid 那么使用如下脚本,可以打印该进程使用的虚拟内存和物理内存: root@Storage:/mnt/mtd# cat rss.sh ...

  9. NSCache使用常见错误

    NSCache用来存储缓存数据的时候.和NSDictionary功能类似, 可是NSCache有一个特别的问题: 一旦接收到内存警告之后,假设使用[NSCache removeAllObjects]处 ...

  10. asm 的hello world 2011.04.28

    这几天一直在弄一个嵌入式的程序,搭环境,熟悉库函数,熟悉汇编,乱成一锅粥,到现在还是没有什么系统性的收获. 或许下周弄出来吧,(一定得弄出来,不然老大该跟我急了……). 今天,熟悉汇编,好歹用汇编写出 ...