当前位置: 移动技术网 > IT编程>脚本编程>vue.js > vue vuecli3.0 使用 scss-loader,设置全局scss变量

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

2020年09月21日  | 移动技术网IT编程  | 我要评论
首先上代码,使用loaderOptionsconst outputDir = process.env.NODE_ENV == "development" ? "dist-test" : "dist";module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/scss/default.scss";` } } }, configureWebpack

首先上代码,使用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);
}

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

本文地址:https://blog.csdn.net/zhai_15733218875/article/details/108704308

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网