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. 【转】器件为什么只听英文Datasheet的话

    浅谈为什么要阅读英文数据手册 ——带你Go Through Datasheet 系列 Unfortunately!从事软硬件(固件)开发的工程师都知道,我们所用的元器件,特别是高端器件和芯片,都是来自 ...

  2. 命令行Scp的使用----远程拷贝文件

    1.用CRT分别连上两台需要传输文件的linux系统服务器,并检查防火墙是否关闭. 查看防火墙状态: /etc/init.d/iptables status 若防火墙启用,暂时关闭防火墙: /etc/ ...

  3. View 的setTag() 和 getTag()

    View 的setTag() 和 getTag()ImageView.setTag(""); 就是当多个ImageView用到一个监听器时,能触发不同的情况,是View的方法 Ad ...

  4. tensorflow四维tensor的形状以及函数tf.argmax( )的笔记

    关于tensorflow里多维数组(主要是四维)的组织形式之前一直没弄懂,最近遇到相关问题,算是搞清楚了一些东西,特别记下来,免得自己又遗忘了. 三维形式能很简单的脑补出来三维的形状,不再赘述. 之前 ...

  5. Python常见初级错误

    一.常见错误(编辑器:Geany) 1.错误原因:或因不兼容中文注释 2.错误原因:vehicles变量前面有多余的空格 3.错误原因:没有正确的缩进(indent)

  6. Docker简介和安装(一)

    Docker简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协 ...

  7. Java基础-集合的嵌套

    Java基础-集合的嵌套 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.静态导入 静态导入是在JDK1.5后的新特性,可以减少开发的代码量,但是实际用处是很一般,静态导入的标准 ...

  8. include动作和include指令的区别

    1. include指令在被导入页面时,会与原有的jsp代码完全融合,共同生成同一个Servlet:而include动作则会在原有的jsp代码使用include方法而被导入页面,所以includ指令在 ...

  9. IOS艺术字及简单的图文混排

    NSString* alertText = [NSString stringWithFormat:@" 以下%d节课程(总课酬¥%.02lf)家长们尚未结课并评价,请尽快联系家长,否则无法获 ...

  10. AAC音频格式详解

    关于AAC音频格式基本情况,可参考维基百科http://en.wikipedia.org/wiki/Advanced_Audio_Coding AAC音频格式分析 AAC音频格式有ADIF和ADTS: ...