【前端vue开发】vue项目使用sass less扩展语言所要安装的依赖
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扩展语言所要安装的依赖的更多相关文章
- Vue开发之项目创建
1.编辑器配置 习惯使用VScode进行开发时,可以安装EditorConfig for Visual Studio Code插件,然后在项目中新建.editorconfig文件,来配置编辑器的使用习 ...
- vue开发的项目中遇到的警告,报错,配置项目文件等合集(长期更新)
1. Vue组件里面data()里面没有return时触发错误:Vue components Cannot read property '__ob__' of undefined 这个警告不解决会触发 ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...
- 从零开始搭建vue开发环境及构建vue项目
1.安装node.js 安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的 node.js版本 node.js自 ...
- 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 该命 ...
- windows环境搭建Vue开发环境
一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs prefix(全局)和cache(缓存)路 ...
- 《Java周边》vue开发环境搭建(windows)
1. NodeJs 安装包下载 百度云:链接: https://pan.baidu.com/s/169TdKRLZd0dXbKSGTr8evw 提取码: th4a 复制这段内容后打开百度网盘手机App ...
- 如何开发H5项目 -- 入门篇
前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...
随机推荐
- Satisfiability of Equality Equations - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Satisfiability of Equality Equations - LeetCode 注意点 必须要初始化pre 解法 解法一:典型的并查集算法 ...
- Beta 反(tu)思(cao) && 获小黄衫感言
写在前面 终于要结束了...我的心情就像走在沙漠中的人看到了一片绿洲一样,身体很疲惫,心情是自由自在~ 这是一篇总结反思的博客 (为了附加分),顺便把早该写的获小黄衫感言一起发了. Beta 反思 做 ...
- wazuh安装手册
一.wazhu部署架构 1.服务器上运行的Agent端会将采集到的各种信息通过加密信道传输到管理端. 2.管理端负责分析从代理接收的数据,并在事件与告警规则匹配时触发警报. 3.LogStash会将告 ...
- Python 爬虫入门(二)—— IP代理使用
上一节,大概讲述了Python 爬虫的编写流程, 从这节开始主要解决如何突破在爬取的过程中限制.比如,IP.JS.验证码等.这节主要讲利用IP代理突破. 1.关于代理 简单的说,代理就是换个身份.网络 ...
- 什么是oauth2
对于目前大部分Web应用来说,用户认证基本上都由应用自身来完成.具体来说,Web应用利用自身存储的用户凭证(基本上是用户名/密码)与用户提供的凭证进行比较进而确认其真实身份.但是这种由Web应用全权负 ...
- [LeetCode] 329. Longest Increasing Path in a Matrix ☆☆☆
Given an integer matrix, find the length of the longest increasing path. From each cell, you can eit ...
- 3.fIddler的使用
https://blog.csdn.net/chaoyu168/article/details/51065644 https://blog.csdn.net/u013474436/article/de ...
- [洛谷P3158] [CQOI2011]放棋子
洛谷题目链接:[CQOI2011]放棋子 题目描述 在一个m行n列的棋盘里放一些彩色的棋子,使得每个格子最多放一个棋子,且不同 颜色的棋子不能在同一行或者同一列.有多少祌方法?例如,n=m=3,有两个 ...
- 手机中的js事件
// 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触 ...
- #Fixed# easy-animation | Animation for Sass
原文链接:http://www.cnblogs.com/maplejan/p/3659830.html 主要修复3.4版本后变量作用域的问题. 代码如下: /* easy-animation.scss ...