在vue中使用sass
首先安装node-sass和sass-loader
cnpm install node-sass && sass-loader --save
在webpack.config.js 的modules中添加配置:
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ["style", "css", "sass"]
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
即可在vue组件的script标签中 require('../css/header.scss');或者在<style lang='scss'>中写入sass
将css在vue组件外写时,可以写一个base scss
\
min.scss:
//基础font-size
$font:16;
//设计稿宽度
$screen:750;
//主色
$bColor: #f9696c;
$fontC:#666; @function px2rem($n){
@return #{$n/($screen*$font/320)}rem
}
base.scss:
@charset "utf-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:;padding:;}
body,input,textarea,select,button,table{border-collapse:collapse;border-spacing:;}
body{font:normal 1em/1.25em 'microsoft Yahei',Verdana,Arial,Helvetica,sans-serif;color:#000;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,fieldset{border:0 none;}
ul,ol,li{list-style:none;}
em,address{font-style:normal;}
table{border-collapse:collapse;}
em,i{font-style:normal;}
strong,b{font-weight:normal;}
img{border:none;}
input,img{vertical-align:middle;}
input{outline:none;}
*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
textarea:focus{outline:;}
a{text-decoration:none;}
.clearfix:after{display:block;clear:both;visibility:hidden;height:;content:" ";font-size:;}
.clearfix{*zoom:;} @import "min";
在其他sass文件比如footer.scss中引入base,即可使用公共的scss:
@import "base/min"; .footer{
position: absolute;
bottom:;
left:;
z-index:;
width: 100%;
height:px2rem(100);
background-color: #f4f4f4;
div{
position: relative;
border-top:1px solid #ddd;
}
a{
position: relative;
height: px2rem(100);
display: block;
float:left;
width:33.33%;
text-align: center;
box-sizing: border-box;
span{
display: block;
margin: px2rem(10) auto 0;
width: px2rem(40);
height:px2rem(40);
font-size: px2rem(40);
color: #999;
}
p{
color:#999;
font-size:px2rem(22);
}
&.active {
span,p{
color: $bColor
} } }
}
在vue中使用sass的更多相关文章
- 在vue中使用sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...
- 在vue中添加sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...
- Vue中使用Sass全局变量
前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...
- 如何在vue中使用sass
使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...
- vue中配置sass(包含vue-cli 3)
目录 vue vue cli 3 老版本的脚手架搭建的项目 版本 安装 不用修改任何配置 vue文件中使用 vue 更新时间: 2018-09-21 vue cli 3 选择 Manually sel ...
- this.getResolve is not a function VUE中使用sass
1. 安装以下依赖 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass ...
- 在Vue中使用sass和less,并解决报错问题(this.getOptions is not a function)
使用 Less 下载依赖:npm install less less-loader 在mian.js 中添加: import less from "less"; Vue.use(l ...
- vue中使用sass 做减法计算
首先确认已安装sass依赖, yarn指令:yarn add sass-loader, style中写法如下: 注意calc(100% - 200px); 之间有两个空格的,
- vue中使用sass
1.npm安装 npm install sass-loader --save-dev npm install node-sass --save-dev //--save写入到package.json里 ...
随机推荐
- C#自减运算符
一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x; // 前缀自减运算符 ...
- swl模拟
#import <Foundation/Foundation.h> #define NSLog(FORMAT, ...) printf("%s\n", [[NSStri ...
- LNMP源码安装脚本
LNMP安装脚本,脚本环境 #LNMP环境搭建centos6.8 2.6.32-696.28.1.el6.x86_64 nginx:1.12.2 mysql:5.6.36 PHP:5.5. ...
- php与js的crc32(支持中文)
代码: <?php function myCrc32($string, $crc = 0) { $table = "00000000 77073096 EE0E612C 990951B ...
- 数据结构-二分查找(Binary Search)
#include <stdio.h> #include <string.h> #include <stdlib.h> #define LIST_INIT_SIZE ...
- Python基础函数必学
我们知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73.1 ...
- stm32基本定时器timer6的原理与使用
/********************基本定时器 TIM 参数定义,只限 TIM6.7************/ /* 一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器 ...
- (原创)task和function语法的使用讨论(Verilog,CPLD/FPGA)
1. Abstract function和task语句的功能有很多的相似之处,在需要有多个相同的电路生成时,可以考虑使用它们来实现.因为个人使用它们比较少,所以对它们没有进行更深的了解,现在时间比较充 ...
- 标准C++中string类的用法总结
相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...
- HUD:2896-病毒侵袭
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2896 病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memor ...