背景概述

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>

在项目中使用 SCSS的更多相关文章

  1. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  2. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  3. 在vue项目中使用scss

    1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...

  4. 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)

    项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...

  5. vue项目中使用scss

    npm install sass-loader node-sass --save-dev

  6. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  7. 项目中遇到的bug、问题总结

    1. Cannot set property 'captcha' of undefined 在node项目中使用svg-captcha生成验证码报错 captcha的代码,这里有一个session.c ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. SCSS 在项目中的运用

    最后一段时间一直在做一些网站或是CMS的项目,想用bootstrap,但是,设计那哥们说了,用什么都行,就不能用bootstrap,我去了个..... 无语中,逼着自己写.说实话,就是用bootstr ...

随机推荐

  1. android状态栏和NavigationBar的动态控制显示

    项目在开发阅读器,阅读器对阅读界面的要求就是在工具栏不显示的状态下,ActionBar和NavigationBar都是不显示的,当工具栏显示时它们都出来,这就需要动态控制它们的显示与隐藏. 第一阶段: ...

  2. 如何编写一个d.ts文件

    这篇文章主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts). 2018.12.18更新说明: 1.增加了全局声明的原理说明. 2.增加了es6的import ...

  3. RTTI(运行时类型识别),typeid,dynamic_cast

    dynamic_cast注意: 1.只能应用于指针和引用的转换: 2.要转换的类型中必须包含虚函数: 3.转换成功则返回地址,如果失败则返回NULL: 参见项目:RTTI

  4. ZOJ 3962 Seven Segment Display

    Seven Segment Display 思路: 经典数位dp 代码: #include<bits/stdc++.h> using namespace std; #define LL l ...

  5. vue select中的option循环的时候,要使用 :value,不能使用 v-model

    <select class="classColor" @change="select" v-model="selectValue"&g ...

  6. chrome 自动加载flash

    class Login(unittest.TestCase): #初始 def setUp(self): chromeOpitons = Options() prefs = { # "pro ...

  7. luffy之多条件登录与极验滑动验证码

    多条件登录 JWT扩展的登录视图,在收到用户名与密码时,也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确. 我们可以通过修改Django认证系统的认证后端( ...

  8. Python特点

    用一种方法,最好只用一种方法来做一件事 1.面向对象(解决一个问题,先考虑由“谁”来做,怎么做是“谁”的职责) 函数.模块.数字.字符串都是对象 在Python中一切皆对象 完全支持继承.重载.多重继 ...

  9. [pat]数素数

    时间限制:1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 令Pi表示第i个素数.现任给两个正整数M <= N < ...

  10. function_exists

    在已经定义的函数列表(包括系统自带的函数和用户自定义的函数)中查找 function_name. 如果 function_name 存在且的确是一个函数就返回 TRUE ,反之则返回 FALSE .