scss定义全局函数、全局方法

需求:
需要一个全局的函数,px转rem,不希望在每个vue文件中引入该函数

步骤一
新建文件,src/assets/rem.css

@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}

步骤二

npm install sass-resources-loader --save-dev

步骤三
修改build/utils 文件

找到 generateLoaders 方法,修改 scss 为

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/rem.scss')
        }
      }
    ),

步骤四:
在 vue文件中 使用
width: px2rem(2072px);

步骤五:
重新 npm run dev

vue-cli2.0 参考
http://www.imooc.com/wenda/detail/414065

vue-cli 3.0 参考:
https://blog.csdn.net/muguli2008/article/details/100578485

你可能感兴趣的:(scss定义全局函数、全局方法)