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. django之路由分组,反向解析,有名,无名分组

    路由层 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态的概念 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'test',vi ...

  2. 【篇一】Python安装与初识

    一.python3.6安装 windows: 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右 ...

  3. C语言实验报告(四)完全数

    完全数,又称完美数或者完备数.是一些特殊的自然数.它所有的真因子的和,恰好等于它本身.编程找出1000以内的所有完全数,并输出该数成为完全数的因子. (例如6=1+2+3.按照6,its factor ...

  4. python--基本类型之集合

    set(集合): 定义和创建: 定义:集合是一个无序的,不重复的数据集合,它主要作用1:去重,把一个列表变成集合,就自动去重了2:关系测试,测试两组数据之间的交集,差集,并集等关系 集合:把不同的数据 ...

  5. EL/JSTL-jsp页面更简单的输出方式

    1.EL(Expression Language):表达式语言,用于页面输出 格式:${表达式} EL支持四则运算,关系运算[常用eq来比较字符串或判断相等],逻辑运算 EL访问空间内对象,[类.对象 ...

  6. CC3200-LAUNCHXL驱动不能正常识别的问题

    1. 本次使用利尔达的CC3200底板,完全兼容官方CC3200-LAUNCHXL,如果上电之后驱动识别为2路串口,是有问题的.原因是FT2232外接的EEPROM没有烧写固件. 2. 安装FT_Pr ...

  7. HBase 数据的多版本特性潜在的意外

    HBase做为KeyValue结构存储,在存储上是依照RowKey的字典序进行排序,对于很多应用而言这可能远远不够,好在HBase的数据可以存储多个版本,并且版本可以排序,其理论上最大的版本数目Int ...

  8. 微信小程序学习笔记(四)

    云函数条件查询 exports.main = async (event, context) => { try { return await db.collection('sweething'). ...

  9. ThinkDev.Data更新日志

    2013-09-29 10:001.重构Where.And.Or.Having.JoinTable代码,新增条件组合查询QueryGroup2.1.1.2.0 2013-09-04 09:001.修复 ...

  10. java 二叉树的创建 遍历

    本来说复习一下BFS和DFS,辗转就来到了二叉树...本文包括二叉树的创建和遍历 概念 数据:1 2 3 4 5 6 7生成一颗二叉树 上面的数是数据,不是位置,要区别一下数据和位置 红色的代表位置, ...