Question

我有一个包

的package.json

.... ＆＃34; themify-icons-scss＆＃34;：＆＃34; git + https://github.com/erwin16/themify-icons-sass＆＃34;， ....

我在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-图标-SCSS / SCSS / themify-icon.scss

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

node_modules / themify-图标-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;
}

欢迎反馈

Answer 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");

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

1 个答案: