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. BZOJ2529 [Poi2011]Sticks 【贪心】

    题目链接 BZOJ2529 题解 要组成三角形,当且仅当最长边长度小于另两条边之和 我们就枚举最长边,另两条边当然是越大越好 我们将所有边排序,从小枚举并记录各个颜色的最长边 当枚举到当前边时,找到除 ...

  2. Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree

    npm安装时候报这个错误,解决方法如下: 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install 详细参考

  3. Struts2的配置文件中, <package>的作用,<action><result>重名?

    问:Struts2的配置文件中, <package>的作用是什么? 答:防止action重名啊,例如前台和后台,总会有很多地方起名重复的! 问:可是访问的时候,不也是访问action吗,能 ...

  4. tar 命令显示进度条

    实现该功能需要安装 pv,然后把需要处理的数据通过管道传给 pv,最后再进行操作. 传给 pv 的目的是为了知道已经处理的数据量大小,同时需要通过 -s 指定总共需要处理的数据量大小. pv 的安装一 ...

  5. JAVA核心技术I---JAVA开发环境配置

    一:常常有看到Java SE,Java EE,Java ME,那么他们的区别呢? 1. Java SE(Java Platform,Standard Edition  java平台标准版). Java ...

  6. Chrome浏览器F12讲解

    Chrome浏览器相对于其他的浏览器而言,DevTools(开发者工具)非常强大.这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析 Chrome浏览器讲解 Chrome 开 ...

  7. OpenResty 扩展库之(一)——lua-resty-shell 库

    介绍 当您需要执行子进程(或shell命令)时,这是一个打算与OpenResty应用程序一起使用的小型库. 它类似于os.execute和io.popen,除了它是完全非阻塞的,因此即使对于需要很长时 ...

  8. Maximal Rectangle&Largest Rectangle in Histogram

    这两天在做leetcode的题目,最大矩形的题目以前遇到很多次了,一直都是用最笨的方法,扫描每个柱子,变换宽度,计算矩形面积,一直都以为就这样O(n2)的方法了,没有想到居然还有研究出了O(n)的算法 ...

  9. Java并发编程原理与实战四十五:问题定位总结

    背景   “线下没问题的”. “代码不可能有问题 是系统原因”.“能在线上远程debug么”    线上问题不同于开发期间的bug,与运行时环境.压力.并发情况.具体的业务相关.对于线上的问题利用线上 ...

  10. Minicap使用分析

    想起前段时间研究过的minicap,抱着无果的心情再次看了源码,这次竟然比上次清晰了一点点,难道是因为这两天被android源码折磨得身心疲惫然而却在不知不觉中增长了?不懂怎么样,看懂了大概. Min ...