全局引入scss变量和函数1、安装sass-resources-loader cnpm install sass-res

1、安装sass-resources-loader

cnpm install sass-resources-loader -D

2、vue.config.js添加配置

    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/assets/css/common.scss";`
            }
        }
    }

3、在@/assets/css/common.scss中自定义全局变量、mixin、function，在单个的*.vue文件中就可以直接使用啦

@function torem($px){
  @return $px/50px*1rem;
}

<style lang="scss" scoped>
.home {
  padding: torem(12px);
}
</style>

4、遇到报错问题 # ionic ValidationError: Invalid options object. Sass Loader has been initialized using an options obj

原因："sass-loader": "^8.0.2"

解决："sass-loader": "^7.1.0"