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. Raven: 2靶机入侵

    0x00 前言 Raven 2是一个中等难度的boot2root 虚拟靶机.有四个flag需要找出.在多次被攻破后,Raven Security采取了额外措施来增强他们的网络服务器安全以防止黑客入侵. ...

  2. 解题:POI 2013 Triumphal arch

    题面 二分答案,问题就转化为了一个可行性问题,因为我们不知道国王会往哪里走,所以我们要在所有他可能走到的点建造,考虑用树形DP解决(这个DP还是比较好写的,你看我这个不会DP的人都能写出来=.=) 定 ...

  3. pg中删除的页是否仍被访问

    昨天看到微信群中,有人提问:pg对于标记为删除的页,是否会扫描到? 今天做了一下测试,发现如果删除的是表的最后连续的几个页(根据ctid来确定数据插入先后,只讨论有insert的情况)中的数据,最后几 ...

  4. 【转】了解CNN

    摘要 过去几年,深度学习在解决诸如视觉识别.语音识别和自然语言处理等很多问题方面都表现出色.在不同类型的神经网络当中,卷积神经网络是得到最深入研究的.早期由于缺乏训练数据和计算能力,要在不产生过拟合的 ...

  5. 4.tar的各个参数详解

    转于:https://blog.csdn.net/liuyundemhsg/article/details/52525028 参数:-c :建立一个压缩文件的参数指令(create 的意思):-x : ...

  6. Docker图形界面管理之Shipyard

    一.介绍 Shipyard基于Docker API实现的容器图形管理系统,支持container.images.engine.cluster等功能,可满足我们基本的容器部署需求. 可堆栈的Docker ...

  7. nltk30_Investigating bias with NLTK

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  8. sql service ---- update和delete 误操作数据 ---- 恢复数据

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...

  9. ZeroMQ API(七) 安全

    1.无安全性:zmq_null(7) 1.1 名称 zmq_null - 没有安全性或机密性 1.2 概要 NULL机制由ZMTP 3.0规范定义:http://rfc.zeromq.org/spec ...

  10. 逻辑控制之While循环控制器(While Controller)

    测试环境 apache-jmeter-3.0 1.   添加While Controller 右键线程组->添加->逻辑控制器->响应断言 2.   控制面板介绍 添加后,面板如下 ...