Vue引入SCSS并自适应手机屏幕

vue引入scss

1.install 依赖包

npm add sass-loader node-sass

1. 注意直接引入最新版本可能会引发error，此处实际引入为
   “node-sass”: “^4.14.1”,
   “sass-loader”: “^7.0.3”
2. 引入降级方式：直接打入版本号

    //eg.
   npm install npm@3.8.6 -g
   

3. 如果需要在Linux环境引入，install之后报错则需要rebuild node-sass

    //eg.
   npm rebuild node-sass@4.14.1
   

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

3.引入

<style lang="scss">
@import './test.scss'; //导入外部scss文件
</style>

手机屏幕自适应

1.index.jade/html

meta(name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no")

2.mixins.scss
需要注意的点： screen and后的空格，没有不会生效

@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;
  }
}

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

3.define.scss

$tabletBreak: 768px;
$spBreak: 414px;
$maxWidth: 1080px;

4.album.scss

@import './define.scss';
@import './mixins.scss';

.album_dialog{
   height:160px;
	@include max-screen($tabletBreak - 1) {
        height: 120px;
        line-height: 120px;
   	}
}