vue默认采用的是原生的css,如果想要使用css预编译工具,比如sass,需要下载对应的scss的loader,

具体是

 npm install --save-dev sass-loader
npm install --save-dev node-sass

之后在vue脚手架的webpack.base.conf.js文件下,加入对应的代码

{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}

就是对.scss文件的处理。

而vue文件中,想要直接在style中写代码,需要给style加上 lang=“scss” 属性。

这样就可以直接在vue文件中写sass的css预编译代码了。

Vue脚手架开发使用sass的更多相关文章

  1. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  2. 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...

  3. vue开发搭建(npm安装 + vue脚手架安装)

    一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...

  4. 前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

    上一篇文章<前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)>介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构.这篇文章介绍 Vue-cli 3.x 如何 ...

  5. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  6. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  7. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  8. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  9. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

随机推荐

  1. apache的.htaccess规则

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...

  2. gem install ruby-odbc失败

    解决: brew install unixodbc gem install ruby-odbc -v '0.99998'

  3. Python学习笔记四:列表,购物车程序实例

    列表 切片 中括号,逗号分隔,可以一次取出多个元素,起始位置包括,结束位置不包括(顾头不顾尾) 如果取最后一个,而且不知道列表长度,可以使用负数(-1是最后一个,以此类推) 如果取最后几个,记住从左往 ...

  4. Java垃圾回收机制概述

    总览 本文会介绍垃圾回收的以下几个方面. 为什么要垃圾回收 在哪里回收 哪些对象需要回收 怎么回收 HotSpotJVM中有哪些具体的回收器可以直接用. 在开始讲垃圾回收之前,先通过一张图快速回忆一下 ...

  5. Stream的顺序流与并行流

    /** * @auther hhh * @date 2019/1/2 22:52 * @description */ public class StreamAPI2 { /** * 流的特性:支持并行 ...

  6. JAVA8 Stream API的使用

    /** * @auther hhh * @date 2018/12/31 12:48 * @description Stream流:用来处理数组.集合的API * 1.不是数据结构,没有内部存储(只是 ...

  7. 快排(golang实现) 递归方法

    递归方法,逻辑简洁清晰.这个算法还是很重要的,需要重点记忆理解,面试经常考手写.据说是与傅里叶变换等并称“20世纪十大算法”.https://blog.csdn.net/v_JULY_v/articl ...

  8. 北京Uber优步司机奖励政策(2月1日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 成都Uber优步司机奖励政策(1月29日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. COGS:1822. [AHOI2013]作业

    1822. [AHOI 2013] 作业 ★★★   输入文件:ahoi2013_homework.in   输出文件:ahoi2013_homework.out   简单对比时间限制:20 s   ...