1、创建一个基于 webpack 模板的新项目

$ vue init webpack myvue

2、在当前目录下,安装依赖

$ cd myvue
$ npm install

3、安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

4、在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

如下图所示:

5、在APP.vue中修改style标签

<style lang="scss">

6、然后运行项目

$ npm run dev

7、修改APP.vue的样式,可以看下效果

8、运行结果背景变成灰色吗,说明你已成功配置好sass

【前端vue开发】vue项目使用sass less扩展语言所要安装的依赖的更多相关文章

  1. Vue开发之项目创建

    1.编辑器配置 习惯使用VScode进行开发时,可以安装EditorConfig for Visual Studio Code插件,然后在项目中新建.editorconfig文件,来配置编辑器的使用习 ...

  2. vue开发的项目中遇到的警告,报错,配置项目文件等合集(长期更新)

    1. Vue组件里面data()里面没有return时触发错误:Vue components Cannot read property '__ob__' of undefined 这个警告不解决会触发 ...

  3. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  4. 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

    在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...

  5. 从零开始搭建vue开发环境及构建vue项目

    1.安装node.js 安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的 node.js版本 node.js自 ...

  6. vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

    1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...

  7. windows环境搭建Vue开发环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs prefix(全局)和cache(缓存)路 ...

  8. 《Java周边》vue开发环境搭建(windows)

    1. NodeJs 安装包下载 百度云:链接: https://pan.baidu.com/s/169TdKRLZd0dXbKSGTr8evw 提取码: th4a 复制这段内容后打开百度网盘手机App ...

  9. 如何开发H5项目 -- 入门篇

    前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...

随机推荐

  1. C++模板编程中只特化模板类的一个成员函数

    模板编程中如果要特化或偏特化(局部特化)一个类模板,需要特化该类模板的所有成员函数.类模板中大多数成员函数的功能可能是一模一样的,特化时我们可能只需要重新实现1.2个成员函数即可.在这种情况下,如果全 ...

  2. 《Linux内核设计与实现》第4章读书笔记

    第四章 进程调度 调度程序负责决定将哪个程序投入运行,何时运行以及运行多长时间.进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统.调度程序是像Linux这样的多任务操作系统的基 ...

  3. java关于类加载的面试题

    ---面试题 class SingleTon { private static SingleTon singleTon = new SingleTon(); public static int cou ...

  4. 003 Python与类C语言的区别(未完)

    #写在前面的话:重点记录Python的特点 Python特点: 1. 无分号断句 2. 不用担心溢出问题 3. if-else的用法不同 #if或else后面都要添加冒号: import random ...

  5. python的dict()字典数据类型的方法详解以及案例使用

    一.之前的回顾 # int  数字 # str 字符串 # list 列表 # tuple 元组 # dict 字典 字典中最重要的方法 keys() values() items() get upd ...

  6. etcd基本操作

    目录 概述 安装etcd 使用etcdctl操作etcd 数据库操作 非数据库操作 使用curl操作etcd 概述 etcd是一个用于共享配置和服务的高可用键值存储系统,由CoreOS使用开发并作为C ...

  7. Mongo副本集搭建

    解压mongodb-linux-x86_64-rhel70-3.2.0.tgz 将解压后的bin路径添加到系统环境变量,保证mongo.mongod等命令可用 创建副本集目录mongo/27017.2 ...

  8. P2831 愤怒的小鸟

    P2831 愤怒的小鸟 从 \((0, 0)\) 发射一只鸟, 轨迹满足抛物线, 问最少几只鸟可以打完 \(n <= 18\) 只猪 错误日志: 处理抛物线数组没有初始化 Solution 数据 ...

  9. openstack指南

    1.openstack官网 http://www.openstack.org/ 2.openstack源码地址 https://github.com/openstack 3.openstack的pac ...

  10. [转]windows下安装python MySQLdb及问题解决

    转自 https://blog.csdn.net/ping523/article/details/54135228#commentBox 之前按照网络上搜罗的教程安装了python-mysql(1.2 ...