vue2.0以上版本安装sass(scss)
一、首先说明sass和scss的区别。
1、异同:1)简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力。语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号
2)文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
3)语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
//sass
.father
width:100px;
.son
width:50px;
//scss
.father{
width:100px;
.son{
width:50px;
}
}
2、 scss功能很强大的样子,能做运算、写函数啥的,但是我只是作为语法糖用而已,只看了些基础功能
我个人常用的功能有:
- 嵌套
- 变量 $color : #111111;
- 混入 @mixin
- 继承 @extend
3、一个关于@mixin、@extend、%placeholder的适用场景总结
- mixin 可以传变量
- extend 不可以传变量,相同样式直接继承,不会造成代码冗余;基类未被继承时,也会被编译成css代码
- placeholder 基类未被继承时不会被编译成css代码
二、
1、开始在vue项目中使用sass,在命令行输入一下命令进行安装(使用git命令行要用shift+insert 进行粘贴否则粘贴不上)
cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装sass-loader
cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!
2. 这个时候你打开build文件夹下面的webpack.base.config.js
把里面的module改成这样的
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别sass!
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
3.在需要用到sass的地方添加lang=scss
<style lang="scss" scoped="" type="text/css">
//你的sass语言 $primary-color: #333;
body {
color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
}
</style>
sass的一些其它用法可以查看官网!
vue2.0以上版本安装sass(scss)的更多相关文章
- vue2.0 在main.js引入scss文件报错
在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...
- [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装
本文地址:http://blog.csdn.net/sushengmiyan/article/details/46740381 简介 sencha cmd 6安装过程不需要UAC控制了对于widnow ...
- Microsoft Dynamics CRM 9.0 OP 版本 安装 的那些 雷
天天讲安装过程好无聊了,还是搞点有营养的东西来,那么后面来说说刚出来的MSCRM OP 9.0 版本安装的那些雷: 雷1:操作系统要求Windows 2016 Server 这点还好,因为之前安装MS ...
- 单实例dg软件从10.2.0.4版本安装至10.2.0.5.12
DG环境搭建需求,因此安装与主库相同的软件版本 1.主库软件版本10.2.0.5.12 2dg环境提供的是全新的10.2.0.4.0 3.安装步骤,安装10.2.0.5 静默安装 psu安装10.2. ...
- vue项目安装sass/scss
vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...
- 最新版robotframework4.0.3版本安装
python最新版本已经到了3.9了.对应的最新版本也更新到robotframework4.0.3. robotframework支持的自动化测试的类型以及需要的库: 1.ui自动化测试:Seleni ...
- MySQL8.0.x 版本安装步骤傻瓜式教程【官方版】
MySQL8.0.x 安装 一.下载 MySQL官网下载链接:https://downloads.mysql.com/archives/community/ 选择版本后下载zip文件 博主选择的是8. ...
- window mysql8.0 zip版本安装
第一步下载安装包 官方下载地址:https://dev.mysql.com/downloads/mysql/ 解压到D盘目录中D://db 第二步配置环境变量 编辑path内容 添加mysql地址 第 ...
- django2.0 以上版本安装 xadmin
1.xadmin的下载 源码包下载地址: https://github.com/sshwsfc/xadmin/tree/django2 2.使用命令安装xadmin pip install 你下载的压 ...
随机推荐
- prim算法,克鲁斯卡尔算法---最小生成树
最小生成树的一个作用,就是求最小花费.要在n个城市之间铺设光缆,主要目标是要使这 n 个城市的任意两个之间都可以通信,但铺设光缆的费用很高,且各个城市之间铺设光缆的费用不同,因此另一个目标是要使铺设光 ...
- stderr 和stdout
今天又查了一下fprintf,其中对第一个参数stderr特别感兴趣. int fprintf(FILE *stream,char *format,[argument]): 在此之前先区分一下:pri ...
- 【转】Python之文件与目录操作(os、zipfile、tarfile、shutil)
[转]Python之文件与目录操作(os.zipfile.tarfile.shutil) Python中可以用于对文件和目录进行操作的内置模块包括: 模块/函数名称 功能描述 open()函数 文件读 ...
- 【shell】查找后拷贝find . -name *.csv -exec cp {} /home/ \;
Find命令的一般形式为: find pathname -options [-print -exec -ok] 让我们来看看该命令的参数: pathname: find命令所查找的目录路径.例如用.来 ...
- Libevent源码分析系列
1.使用libevent库 源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了,然后去看底层相应的源码,这样比较有条理,自上向下掌握.下面用libevent库写个程序,每隔1秒 ...
- springboot系列十四、自定义实现starter
一.starter的作用 当我们实现了一个组建,希望尽可能降低它的介入成本,一般的组建写好了,只要添加spring扫描路径加载spring就能发挥作用.有个更简单的方式扫描路径都不用加,直接引入jar ...
- notepad++64位添加plugin manager
- 64位的notepad++,下载下来似乎没有plugin manager,如果真没有可以下载plugin manager. - plugin manager的下载地址:https://github ...
- eclipse指定项目编译级别
指定项目编译级别Eclipse→Preferences→Java→Compiler→Compiler compliance level:1.6或其他 或者,
- 阿里云配置ssl证书服务遇到的几个问题和解决方法
系统环境: 系统:阿里云ECS CentOS6.5+Apache2.4.10 前提:公司需要将站点升级到使用SSL证书服务(https) 实践执行:在阿里云的证书服务--选择了一个免费的证书服务,毕竟 ...
- mongodb数据库集群及sharding分片配置
复制集群的配置 1.安装mongodb数据库 在主节点和从节点上都安装mongodb # rpm -ivh mongo-10gen-2.4.6-mongodb_1.x86_64.rpm mongo-1 ...