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. linux初学者-Apache篇

     linux初学者-Apache篇          Apache提供了超文本传输协议http,httpd是Apache超文本传输协议的主服务器.下文将对httpd的安装和配置进行简单的叙述.     ...

  2. ASP.NET Core MVC 之布局(Layout)

    1.什么是布局 布局通常包含常见的用户界面元素,例如应用头,导航或菜单元素和页脚,如图: 常见的HTML结构(例如脚本和样式表)也经常被应用程序中许多页面使用.所有这些共享元素都可以在布局中定义,然后 ...

  3. 从零开始实现ASP.NET Core MVC的插件式开发(三) - 如何在运行时启用组件

    标题:从零开始实现ASP.NET Core MVC的插件式开发(三) - 如何在运行时启用组件 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/112 ...

  4. C#文件操作 File(静态类)

      操作某一个文件/文件夹,需要一个文件的完整路径 一.使用File的静态方法进行文件操作 1 2 3 4 5 6 7 8 9 //使用file的静态方法进行复制             File.C ...

  5. jmeter Linux环境执行总报错 cannot allocate memory

    1.windows环境写好的测试用例,执行没有问题,在Linux环境跑总是报错,提示如下 cannot allocate memory 2.一开始以为是哪块设置有问题,因为脚本里边有设置邮件自动发送, ...

  6. Nginx安装(详细版本)

    Nginx安装文档 前言: 最近,系统部署人员那边,让我们给写一个傻瓜式的Nginx安装过程.所以就有了这个文档,本着独乐乐不如众乐乐,就分享一下.我觉得对入门小白来说,有图,乃至运行过程图,是很重要 ...

  7. Python基础总结之第十一天开始【再深入一下函数,重新认识一下】(新手可相互督促)

    感谢最近大家的关注,希望我的学习笔记对大家有帮助!也感谢各位的评论和推荐,请多多指教. 在重新认识函数之前,我们先看两个函数.一个是我们在前面笔记经常用到的print()  :另一个是input() ...

  8. 前端工程师和设计师必备的chrome插件

    Google Chrome是最好用的几个浏览器之一,今天我来分享下自己收集的一系列Chrome插件,希望对大家的学习和工作有帮助. 注:你可以通过复制链接或者在谷歌商店搜索相应插件的名称来获取以下插件 ...

  9. Sring 的 @AliasFor 使用规则

    一.该标签存在的意义 顾名思义 @AliasFor 表示别名,它可以注解到自定义注解的两个属性上,表示这两个互为别名,也就是说这两个属性其实同一个含义.该标签存在的含义,从网上查发现有个点, 若  自 ...

  10. Web项目如何做单元测试

    你可能会用单元测试框架,python的unittest.pytest,Java的Junit.testNG等. 那么你会做单元测试么!当然了,这有什么难的? test_demo.py def inc(x ...