vue-cli 项目 配置全局scss 无需单独引入 各个页面可使用scss函数

第一步：在新建一个scss文件

src/styles/mixins.scss

//定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//长、宽
@mixin wh($width, $height:$width){
  width: $width;
  height: $height;
}

第二步： 在项目vue.config.js中配置

关键代码

官方文档： 向预处理器-loader-传递选项

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/mixins.scss";` // 对应的scss文件路径
      }
    }
  },
}

配置项 示例图：

第三步，直接在页面用使用，无需引入，使用方式如下

<style lang="scss" scoped>
.box {
  @include center;
  @include wh(100%, 100%);
}
style>

完成如上步骤即可实现！！！

如果觉得有用欢迎点赞关注