Vue笔记:在项目中使用 SCSS
背景概述
1. CSS预处理器
css预处理器定义了一种新的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多。CSS 预处理器语言有 scss(sass)、less 等。
2.SASS和SCSS的区别
除了文件扩展名不同(分别是“.sass” 和 “.scss”)外,Sass是以严格缩进式语法规则来书写的,不带大括号和分号,而SCSS的语法和CSS书写语法类似。
项目引入
1.vue-loader
在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader。vue-loader是什么东西呢?vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。
不了解webpack的同学可以先去自行百度。我这里就放一张图,看完大家可以也就能知道webpack能做些什么事情了。
2.安装SCSS
在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
执行下面命令,安装 sass/scss loader。
- npm install sass-loader --save-dev
- npm install node-sass --sava-dev
3.添加配置
在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。
- {
- test: /\.scss$/,
- loaders: ['style', 'css', '
- }
4.如何使用
在页面代码 style 标签中把 lang 设置成 scss 即可。
- <style lang="scss">
- </style>
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
Vue笔记:在项目中使用 SCSS的更多相关文章
- 在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- 在vue项目中使用scss
1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...
- VUE+webpack+npm项目中的RSA加解密
一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEn ...
- vue - vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...
随机推荐
- issubclass ,isinstance,反射
issubclass() 函数 issubclass() 方法用于判断参数 class 是否是类型参数 classinfo 的子类. 语法 以下是 issubclass() 方法的语法: issubc ...
- 个人理解的int数组和char数组
char数组中不论是一维还是二维的,在程序执行时每一块的分离依据都是以提供的起始地址到'\0'为一个处理的字符串.所以关于char[]的函数都是只提供相应起始地址作为形参就可以. char[]互相交换 ...
- JS高程研读记录一【事件流】
事件流主要有冒泡事件.事件捕获及DOM事件流.现浏览器除了IE8及更早版外,基本支持DOM事件流. 冒泡事件由IE提出,而事件捕获则由Netscape提出.但两者却是截然相反的方案. 以DIV点击为例 ...
- Yarn的资源隔离机制
源调度和资源隔离是YARN作为一个资源管理系统,最重要和最基础的两个功能.资源调度由ResourceManager完成,而资源隔离由各个NodeManager实现,在文章“Hadoop YARN中内存 ...
- jQuery插件初级练习1答案
html: <script> $(".btn").click(function(){ $.color($("#box"),"blue&qu ...
- SRM473
250pt: 题意:在二维平面上,给定3种,左转.右转,以及前进一步,的指令序列循环执行,问整个移动过程是否是发散的. 思路:直接模拟一个周期,然后判断1.方向是否和初始时不同 2.是否在原来的点 满 ...
- UNIGUI换版本注意事项
比如UNIGUI换版本注意事项 许多人在更换UNIGUI版本时,会遇到各种问题,报各样错.比如下面的: 然后便不知所措,怀疑是UNIGUI新版本有问题——不能安装成功.其实不然. 下面是正确的解决方法 ...
- Git的一些资源链接
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- 软件测试思维导图[ZZ]
原文链接 全图
- 在ASP.NET Core中,静态类如何读取配置文件
这是今天下午一个同事问我的问题,如何在静态类中读取json配置文件.我当时并没有告诉他如何如何去做,办法肯定是有,但是这种编程思维确实得改改了.静态类.静态方法不是面向对象编程的最佳实践..NET C ...