vue.js webpack如何从scss文件导入字体答案

【问题标题】：vue.js webpack how to import fonts from scss filevue.js webpack如何从scss文件导入字体
【发布时间】：2018-09-13 01:07:12
【问题描述】：

我有一个包裹

package.json

.... "themify-icons-scss": "git+https://github.com/erwin16/themify-icons-sass", ....

我在我的 App.vue 组件中导入的

App.vue

<style lang="scss">
@import "~themify-icons-scss/scss/themify-icons.scss";

但是我得到一个构建错误

These relative modules were not found:* ../fonts//themify.ttf?-fvbane in ./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compi
ler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

* ../fonts/themify.eot in ./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compiler?{"opt
ionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

* ../fonts/themify.eot?-fvbane in ./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compil
er?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

* ../fonts/themify.svg?-fvbane in ./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

* ../fonts/themify.woff?-fvbane in ./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

node_modules/themify-icons-scss/scss/themify-icon.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "extras";
@import "icons";

node_modules/themify-icons-scss/scss/_path.scss

/* FONT PATH
 * -------------------------- */

@font-face {
    font-family: 'themify';
    src:url('#{$ti-font-path}/themify.eot?-fvbane');
    src:url('#{$ti-font-path}/themify.eot?#iefix-fvbane') format('embedded-opentype'),
        url('#{$ti-font-path}/themify.woff?-fvbane') format('woff'),
        url('#{$ti-font-path}//themify.ttf?-fvbane') format('truetype'),
        url('#{$ti-font-path}/themify.svg?-fvbane#themify') format('svg');
    font-weight: normal;
    font-style: normal;
}

欢迎反馈

【问题讨论】：

file-loader + resolve-url-loader 在这里很有用。文件加载器复制文件以进行分发，解析 url 加载器以使用文件加载器映射的路径
感谢您的反馈..正如您所提到的，使用 vue-cli v2 （这就是我已经做过的）是可以的，但是我现在使用 vue-cli 版本 3-beta 来解决问题。 ..不容易找到任何例子...
感谢您的反馈...这就是我之前使用 vue-cli v2 时所做的 .. 但是我正在测试 vue-cli v3-beta .. 一些关于如何做到这一点的示例...当前的问题是 src:url('#{$ti-font-path} 变量被定义为 $ti-font-path: "../fonts" !default; 并且 sass-loader 无法获取它...

标签： webpack vue.js sass

【解决方案1】：

尝试使用 URL 导入示例来调用它，我是如何为 google 字体做的

@font-face {
  font-family: "Font-Name";
  src: url("/fonts/font-name.eot");
  src: url("/fonts/font-name.eot?#iefix") format("embedded-opentype"),
    url("/fonts/font-name.woff") format("woff"),
    url("/fonts/font-name.ttf") format("truetype"),
    url("/fonts/font-name.svg#font-name") format("svg");
  font-weight: normal;
  font-style: normal;
}
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic");

【讨论】：