首先安装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. How to save console output to a file in Eclipse

    https://coderanch.com/t/278299/java/Writing-output-console-file-system File file = new File("te ...

  2. CSS的垂直居中和水平居中总结

    内联元素居中方案 水平居中设置: 行内元素 设置 text-align:center: Flex布局 设置display:flex;justify-content:center;(灵活运用) 垂直居中 ...

  3. STL之deque用法

    deque:双端队列 底层是一个双向链表. 常用的有队列的尾部入队.首部出队. 普通队列:queuequeue 模板类的定义在<queue>头文件中.与stack 模板类很相似,queue ...

  4. 3170: [Tjoi2013]松鼠聚会

    Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 1804  Solved: 968[Submit][Status][Discuss] Descript ...

  5. MySQL - CASE WHEN ... THEN ... ELSE ... END语句

    范例: CASE WHEN p.allow_over = 1 THEN p.allow_over_capital ELSE 0 END

  6. linux运维、架构之路-MySQL多实例

    一.MySQL多实例介绍            一台服务器上开启多个不同的服务端口(3306,3307,3308),运行多个MySQL服务进程,共用一套MySQL安装程序,多实例MySQL在逻辑上看是 ...

  7. Linux更改文件权限(一)

    更改文件权限(一)============================== (参考于千锋教育教学笔记) 设置权限 1.更改文件的属主.属组chown (change owner)[root@ami ...

  8. 嵌入式开发 centos7 交叉编译环境准备

    1. 安装centos7,启动图像化界面. 参考:https://blog.csdn.net/qq_23014435/article/details/74347925 # systemctl get- ...

  9. Python知识点进阶——生成器

    生成器 为什么要将列表转化为迭代器? 因为列表太大的话用内存太大,做成迭代器可以节省空间,用的时候再拿出部分. 生成器是不会把结果保存在一个系列中,而是保存生成器的状态,在每次进行迭代时返回一个值,知 ...

  10. spring boot 设置tomcat post参数限制

    今天传图片,用的base64字符串,POST方法,前端传送的时候总是莫名其妙的崩溃,去网上搜了半天,以为是文件大小被限制了,但是我这个是字符串接收,不是文件接收,于是又继续搜,原来post本身没有参数 ...