在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:0;padding:0;}
body,input,textarea,select,button,table{border-collapse:collapse;border-spacing:0;}
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:0;}
a{text-decoration:none;}
.clearfix:after{display:block;clear:both;visibility:hidden;height:0;content:" ";font-size:0;}
.clearfix{*zoom:1;}

@import "min";

在其餘sass文件好比footer.scss中引入base，便可使用公共的scss:

@import "base/min";

.footer{
  position: absolute;
  bottom:0;
  left: 0;
  z-index: 100;
  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
      }

    }


  }
}