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. Java软件开发者,如何学习大数据?

    正常来讲学习大数据之前都要做到以下几点 1.学习基础的编程语言(java,python) 2.掌握入门编程基础(linux操作,数据库操作.git操作) 3.学习大数据里面的各种框架(hadoop.h ...

  2. Linux的基础命令大全

    linux的基础命令大全 1.shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口(命令解释器) ls -al /bin/sh   ls -al /bin/bash 查看这些shell的 ...

  3. 『Python基础-14』匿名函数 `lambda`

    匿名函数和关键字lambda 匿名函数就是没有名称的函数,也就是不再使用def语句定义的函数 在Python中,如果要声匿名函数,则需要使用lambda关键字 使用lambda声明的匿名函数能接收任何 ...

  4. Python语言发展的关键时间节点

    1989年:Python想法的产生 1991年:发布最早的Python可用版本 2000年:发布Python2.0 2010年:发布Python2.x系列的最后一个版本,主版本号为2.7 2008年: ...

  5. Python值集合操作

    list_l1 = [12,1,4,6,9,5,4,2,11] list_l1 = set(list_l1) print(list_l1,type(list_l1)) #集合也是无序的 list_2 ...

  6. vim 版本更新

    sudo add-apt-repository ppa:jonathonf/vim sudo apt update sudo apt install vim 如果您想要卸载它, 请使用如下命令 sud ...

  7. VINS(八)初始化

    首先通过imu预积分陀螺仪和视觉特征匹配分解Fundamental矩阵获取rotationMatrix之间的约束关系,联立方程组可以求得外参旋转矩阵: 接下来会检测当前frame_count是否达到W ...

  8. MyBatis-SELECT基本查询

    1.返回一个LIST <!-- public List<Employee> getEmpsByLastNameLike(String lastName); --> <!- ...

  9. Bootstrap基础篇—常见的CSS类

    一.标题 标签 大小 h1 36px h2 30px h3 24px h4 18px h5 14px h6 12px 二.常见的内联样式 标签 用途 del 删除的文本 s 无用的文本 ins 插入的 ...

  10. leetcode-打家劫舍(动态规划)

    你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定一个代表每 ...