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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容