scss px转换rem

使用scss根据输入的px值转换成相对应的rem

在进行转换之前需要在进行一步操作需要把build/utils.js，将 scss: generateLoaders('sass')，修改为如下：

scss: generateLoaders('sass')
    .concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/index.scss') //这里是单独建的存放变量的scss，我的是把所有的文件都引入到index.scss里面
        }
      }
    ), 

然后创建一个rem.scss引入到index.scss里在执行下面的操作就可以全局的进行使用了

$vw_fontsize: 192;
@function rem($px) {
  @return ($px / $vw_fontsize) * 1rem;
}
//一种计算方式
// 根元素大小使用 vw 单位
$vw_design: 1920;
html {
  font-size: ($vw_fontsize / $vw_design) * 100vw;//10vw
  // 同时，通过Media Queries 限制根元素最大最小值
  @media screen and (max-width: 980px) {
      font-size: 98px;
  }
}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
$min_width: 1024px;
body {
    // max-width: 1920px;
    min-width: $min_width;
}