首先安装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的更多相关文章

  1. 在vue中使用sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...

  2. 在vue中添加sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...

  3. Vue中使用Sass全局变量

    前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...

  4. 如何在vue中使用sass

    使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...

  5. vue中配置sass(包含vue-cli 3)

    目录 vue vue cli 3 老版本的脚手架搭建的项目 版本 安装 不用修改任何配置 vue文件中使用 vue 更新时间: 2018-09-21 vue cli 3 选择 Manually sel ...

  6. this.getResolve is not a function VUE中使用sass

    1. 安装以下依赖 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass ...

  7. 在Vue中使用sass和less,并解决报错问题(this.getOptions is not a function)

    使用 Less 下载依赖:npm install less less-loader 在mian.js 中添加: import less from "less"; Vue.use(l ...

  8. vue中使用sass 做减法计算

    首先确认已安装sass依赖, yarn指令:yarn add sass-loader, style中写法如下: 注意calc(100% - 200px); 之间有两个空格的,

  9. vue中使用sass

    1.npm安装 npm install sass-loader --save-dev npm install node-sass --save-dev //--save写入到package.json里 ...

随机推荐

  1. C#自减运算符

    一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x;  // 前缀自减运算符 ...

  2. swl模拟

    #import <Foundation/Foundation.h> #define NSLog(FORMAT, ...) printf("%s\n", [[NSStri ...

  3. 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. ...

  4. php与js的crc32(支持中文)

    代码: <?php function myCrc32($string, $crc = 0) { $table = "00000000 77073096 EE0E612C 990951B ...

  5. 数据结构-二分查找(Binary Search)

    #include <stdio.h> #include <string.h> #include <stdlib.h> #define LIST_INIT_SIZE ...

  6. Python基础函数必学

    我们知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73.1 ...

  7. stm32基本定时器timer6的原理与使用

    /********************基本定时器 TIM 参数定义,只限 TIM6.7************/ /* 一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器 ...

  8. (原创)task和function语法的使用讨论(Verilog,CPLD/FPGA)

    1. Abstract function和task语句的功能有很多的相似之处,在需要有多个相同的电路生成时,可以考虑使用它们来实现.因为个人使用它们比较少,所以对它们没有进行更深的了解,现在时间比较充 ...

  9. 标准C++中string类的用法总结

    相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...

  10. HUD:2896-病毒侵袭

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2896 病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memor ...