vue vuecli3.0 使用 scss-loader,设置全局scss变量

首先上代码，使用loaderOptions

const outputDir = process.env.NODE_ENV == "development" ? "dist-test" : "dist";
module.exports = {
     
  css: {
     
    loaderOptions: {
     
      sass: {
     
        prependData: `@import "@/scss/default.scss";`
      }
    }
  },
  configureWebpack: {
     
    externals: {
     
      // vue: "Vue"
      // "vue-router": "VueRouter",
      // "element-ui": "ELEMENT"
    }
  },
  outputDir
};

这样，就可以在default.scss中定义全局的scss变量
比如

在其他的vue文件中就可以直接使用全局的scss变量

现在遇到一个问题，就是在default.scss中，想使用 css3 的@font-face，需要使用src属性，用来引用自定义字体的文职，比如字体包放在assets中的fonts的文件夹内
一般都是这么写的

可是，这个时候浏览器报错了

后来仔细查看路径，我这么做是没有错的。
后来无意间试了试

@font-face {
     
  font-family: myYJFont;
  src: url("~@/assets/fonts/yjsz.ttf");
}

竟然可以了，浏览器不报错了