首先安装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. common-fileupload组件实现java文件上传和下载

    简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  2. react安装极其了解

    全局安装react脚手架工具 首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app 创建react项目:create- ...

  3. Bzoj 1081 [Ahoi2009] chess 中国象棋

    bzoj 1081 [Ahoi2009] chess 中国象棋 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1801 状态比较难设,的确 ...

  4. 洛谷P1049装箱问题

    一句话刚刚的题会了,这题能不会么. #include<bits/stdc++.h> using namespace std; int main(){ int n,m; cin>> ...

  5. (83)zabbix Less than 25% free in the configuration cache解决

    在zabbix server默认配置下,出现告警:Less than 25% free in the configuration cache,字面意思是:可用的配置缓存少于25%. 报错如下图: 增加 ...

  6. 判断Datable是否有数据

    采用any()方法 检查表格的数据是否为空 var table = $('#example').DataTable(); if ( ! table.data().any() ) { alert( 'E ...

  7. CentOS 7 环境下挂载新磁盘

    最近某个项目需要给数据库服务器添加磁盘,由于太久没搞过,就给虚拟机加了10G的空间,用来练习一下磁盘的挂载 一. 首先执行"fdisk -l"命令,查看磁盘信息 [root@loc ...

  8. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. 第48课 thinkphp5添加商品库

    目录 思路: 1. html页面里属性下拉框里的值是从goods_attr联attr里的查出来传到模板里的.在属性的下拉栏里展示出来 2. html页面里用二维数组的结构goods_attr[{$k} ...

  10. python面向对象之反射和内置方法

    一.静态方法(staticmethod)和类方法(classmethod) 类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被 ...