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. 【树论 2】Kruskal 的学习和使用

    Tips:本题解是[随便搞搞 1]Prim算法的学习和使用 的姊妹篇,希望先阅读Prim算法. 预习及预备知识: 克鲁斯卡尔(Kruskal)算法是实现图的最小生成树最常用的算法. 大家知道,存储图的 ...

  2. 设置Linux终端字体颜色

    系统启动后,环境变量加载的顺序为:/etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~/.bashrc → /etc/bashrc 想要修改 ...

  3. Vulkan vs OpenGL ES

    Vulkan 简介 Vulkan是一个免费开放的.跨平台的.底层的图形API,在一定程度上比AMD Mantle.微软DirectX 12.苹果Metal更值得开发者关注. Vulkan的最大任务不是 ...

  4. bzoj 3853 : GCD Array

    搬运题解Claris:1 n d v相当于给$a[x]+=v[\gcd(x,n)=d]$ $\begin{eqnarray*}&&v[\gcd(x,n)=d]\\&=& ...

  5. 【数学】【CF1096C】 Polygon for the Angle

    Description 给定一个角度 \(\theta\),请你寻找一个正 \(n\) 边型,满足在这个正 \(n\) 边型上找三个顶点 \(A,B,C\) (可以不相邻),使得 \(\angle A ...

  6. Zabbix利用msmtp+mutt发送邮件报警

    操作系统:CentOS 7 Web环境:Nginx+MySQL+PHP zabbix版本:zabbix-2.4.8.tar.gz 邮件服务:msmtp-1.4.32.tar.bz2     #http ...

  7. 读论文Machine Learning for Improved Diagnosis and Prognosis in Healthcare

    Deep Learning的基本思想 假设我们有一个系统S,它有n层(S1,…Sn),它的输入是I,输出是O,形象地表示为: I =>S1=>S2=>…..=>Sn => ...

  8. WinterCamp2017吃饭睡觉记

    noip考完后励志好好学习进HE队然后Au,就这样每天勤奋刻苦发愤图强不知不觉就到冬令营了. 除了我之外的大佬们都是以上经历. 我呢……一个很爱浪的蒟蒻. 冬令营到了,伟大的CCF本着报一个录一个的原 ...

  9. Hadoop基础-HDFS分布式文件系统的存储

    Hadoop基础-HDFS分布式文件系统的存储 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HDFS数据块 1>.磁盘中的数据块 每个磁盘都有默认的数据块大小,这个磁盘 ...

  10. Shell记录-Shell命令(磁盘)

    inux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式 df [选项] [文件] Shell ...