Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它。下面介绍了如何在vue项目

中引入Sass。

  首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接

跳过这一步。接下来执行命令行vue init webpack mypro(注:mypro是项目名)。

  接下来安装Sass依赖包,使用以下命令行:

  npm install sass-loader --save-dev

  npm install node-sass --save-dev

  执行完毕后,找到build文件夹,在文件夹里面的webpack.base.conf.js中修改以下配置:

  在module下的rules里添加配置:

  最后就到了应用这一步了,只需设置lang="scss"

  好了,是不是很简单。

vue项目中引入Sass的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  3. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  4. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  5. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  6. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

  7. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  8. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  9. vue项目中引入iconfont

    背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

随机推荐

  1. RabbitMQ延迟消息的延迟极限是多少?

    之前在写Spring Cloud Stream专题内容的时候,特地介绍了一下如何使用RabbitMQ的延迟消息来实现定时任务.最近正好因为开发碰到了使用过程中发现,延迟消息没有效果,消息直接就被消费了 ...

  2. 利用 ssh 传输文件

    前提条件: 服务器要开启写入权限: 本地和服务器都要安装有 scp 包: 如何传输: 1. 从服务器上下载文件: scp username@servername:远程目录/文件名 本地目录 例:scp ...

  3. 记一次搭建ftp服务器的简略经历

    需求:在linux中搭建一个ftp 服务器,用户为:user1 目录为 /data/use1  ,          安全设置:限制权限,只能访问自己目录,限制端口,只允许特定ip访问. 1,安装vs ...

  4. 最全的Vue组件通信方式总结

    1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...

  5. IO流1

    一.I/0:input/output1.java.io.file表示:文件或文件夹(目录)File f = new File("文件路径");注意:相对路径:非web项目的相对都是 ...

  6. web设计_8_数据表格内容样式分离

    1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing:; } 2. HTML结构 <tabl ...

  7. Django是如何防止注入攻击-XSS攻击-CSRF攻击

    注入攻击-XSS攻击-CSRF攻击介绍请访问:https://www.cnblogs.com/hwnzy/p/11219475.html Django防止注入攻击 Django提供一个抽象的模型层来组 ...

  8. JavaScript数据结构——栈的实现与应用

    在计算机编程中,栈是一种很常见的数据结构,它遵从后进先出(LIFO——Last In First Out)原则,新添加或待删除的元素保存在栈的同一端,称作栈顶,另一端称作栈底.在栈中,新元素总是靠近栈 ...

  9. Template(模板)模式

    第三章:模板模式 Template模式比较简单,是基于继承关系的一种设计模式,由父类定义处理流程框架,由子类中实现具体处理. Code: package example.template; /*** ...

  10. 【Java例题】2.2 分数类

    2.定义分数类,包括分子和分母变量.构造方法. 加减乘除方法.化简方法.值计算方法和显示分子和分母的方法. 然后编写一个主类,在其主方法中通过定义两个分数对象来 显示每一个分数的分子值.分母值.化简和 ...