在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里 ...
随机推荐
- common-fileupload组件实现java文件上传和下载
简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...
- react安装极其了解
全局安装react脚手架工具 首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app 创建react项目:create- ...
- Bzoj 1081 [Ahoi2009] chess 中国象棋
bzoj 1081 [Ahoi2009] chess 中国象棋 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1801 状态比较难设,的确 ...
- 洛谷P1049装箱问题
一句话刚刚的题会了,这题能不会么. #include<bits/stdc++.h> using namespace std; int main(){ int n,m; cin>> ...
- (83)zabbix Less than 25% free in the configuration cache解决
在zabbix server默认配置下,出现告警:Less than 25% free in the configuration cache,字面意思是:可用的配置缓存少于25%. 报错如下图: 增加 ...
- 判断Datable是否有数据
采用any()方法 检查表格的数据是否为空 var table = $('#example').DataTable(); if ( ! table.data().any() ) { alert( 'E ...
- CentOS 7 环境下挂载新磁盘
最近某个项目需要给数据库服务器添加磁盘,由于太久没搞过,就给虚拟机加了10G的空间,用来练习一下磁盘的挂载 一. 首先执行"fdisk -l"命令,查看磁盘信息 [root@loc ...
- 29.VUE学习之--键盘事件.键盘修饰符的实例讲解
键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 第48课 thinkphp5添加商品库
目录 思路: 1. html页面里属性下拉框里的值是从goods_attr联attr里的查出来传到模板里的.在属性的下拉栏里展示出来 2. html页面里用二维数组的结构goods_attr[{$k} ...
- python面向对象之反射和内置方法
一.静态方法(staticmethod)和类方法(classmethod) 类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被 ...