【前端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.下面 ...
随机推荐
- linux内核分析 第六周 分析Linux内核创建一个新进程的过程
进程的描述 操作系统的三大管理功能:进程管理.内存管理.文件系统 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. 进程控制块PCB task_struct:进 ...
- hdu 5852 :Intersection is not allowed! 行列式
有K个棋子在一个大小为N×N的棋盘.一开始,它们都在棋盘的顶端,它们起始的位置是 (1,a1),(1,a2),...,(1,ak) ,它们的目的地是 (n,b1),(n,b2),...,(n,bk). ...
- nodejs调用脚本(python/shell)和系统命令
每种语言都有自己的优势,互相结合起来各取所长程序执行起来效率更高或者说哪种实现方式较简单就用哪个,nodejs是利用子进程来调用系统命令或者文件,文档见http://nodejs.org/api/ch ...
- linux中awk工具的使用
awk是一个非常好用的数据处理工具.相较于sed常常一整行处理,awk则比较倾向于一行当中分成数个“字段”处理,awk处理方式如下: $ awk '条件类型1{动作1} 条件类型2{动作2} ...' ...
- python 冒泡法 排序
冒泡排序 冒泡排序(Bubble Sort):重复地遍历要排序的数列,依次比较两个元素,如果他们的顺序不符就把他们交换过来.就像气泡一样,需要排序的元素通过比较.交换位置,一点一点浮到对应的位置. 个 ...
- Spring知识总结
一.Spring简述 Spring是一个分层的JavaSE/EEfull-stack(一站式)轻量级开源框架,Spring致力于提供一种方法管理你的业务对象,Spring的主要目的是使JavaE ...
- 多页面应用 VS 单页面应用
多页面应用 每一次页面跳转,后端都会返回一个新的HTML文件, 优点:首屏时间快(只经历了一个HTTP请求),SEO效果好 缺点:页面切换慢 单页面应用 进行页面之间跳转时,并不去加载HTML文件,而 ...
- NOIP2012 提高组 Day 1
期望得分:100+100+70=270 实际得分:100+50+70=220 T2 没有底 最后剩余时间来不及打高精.思路出现错误 T1 Vigenère 密码 题目描述 16 世纪法国外交家 Bla ...
- SXOI2018 游记
noilinux@Capella:~$ cd /Memories/ noilinux@Capella:/Memories$ rm *SXOI* rm:是否删除有写保护的普通文件 "SXOI2 ...
- Django 2.0.1 官方文档翻译:接下来读什么(page 14)
接下来读什么(page 14) 现在你应该已经阅读了所有的(page1-13 )介绍材料,决定继续使用Django.我们仅仅做了简要的介绍(事实上,如果你阅读了前面所有的内容,也只是全部文档的5%.) ...