Vue.js webpack - 如何使用主题图标？

Question

我添加了包

yarn add themify-icons-sass

然后在我的组件中，我将它导入到脚本和样式中

 <script>
 ....
import 'themify-icons-sass'

 <style lang="scss" scoped>
    @import 'themify-icons-sass/themify-icons';
    ...

但我得到一个构建错误

 This dependency was not found:  

 * themify-icons-sass in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue

 To install it, you can run: npm install --save themify-icons-sass 

我在哪里输入错误？感谢反馈

更新

首先，如果我想从 ./node_modules 导入它，那么 @import 不应该是范围样式...
所以我将它移到了我的 App.vue 中的全局样式

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

然后我得到一个错误，node-sass/vendor 目录没有被构建..所以我添加重建 node_sass

 yarn add node-sass --force

现在它正在考虑包，但我收到另一个与字体的相对路径相关的错误：

    These relative modules were not found:
    * ../fonts/themify.eot in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-
    loader/lib/selector.js?type=styles&index=0!./src/App.vue
    * ../fonts/themify.eot?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasIn
    lineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
    * ../fonts/themify.svg?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasIn
    lineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
    * ../fonts/themify.ttf?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
    * ../fonts/themify.woff?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

themify-icons-scss 文件结构如下：

node_modules/themify-icons-scss

fonts
    themify.eot
    themify.svg
    themify.ttf
    themify.woff
scss
   _core.scss
   _extras.scss
   _icons.scss
   _mixins.scss
   _paths.scss
   _variables.scss
   themify-icons.scss

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

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

themify-icons-scss/scss/_path.scss

@font-face { 字体系列：“主题化”； src:url('#{$ti-font-path}/themify.eot?-fvbane'); src:url('#{$ti-font-path}/themify.eot?#iefix-fvbane') 格式('embedded-opentype'), url('#{$ti-font-path}/themify.woff?-fvbane') 格式('woff'), url('#{$ti-font-path}//themify.ttf?-fvbane') 格式('truetype'), url('#{$ti-font-path}/themify.svg?-fvbane#themify') 格式('svg'); 字体粗细：正常； 字体样式：正常；

这是存在一些问题的地方...变量中定义的 $ti-font-path 相对于包中的 scss 目录..

themify-icons-scss/scss/_variables.scss

$ti-font-path: "../fonts" !default;
$ti-class-prefix: "ti" !default;

}

Answer 1

已解决...

最近有一个不错的包（更新了 3 个月，我将它分叉为我的存档..）。见themify-icons-scss

 yarn add git+http://github.com/Frolki1-Dev/themify-icons-sass

为了解决包 _path.scss 中的相对字体路径变量的问题，我添加了包 resolve-url-loader。 （见resolve-url-loader on github

 yarn add resolve-url-loader --dev

根据 resolve-url-loader 自述文件，我想使用我插入到 build/utils 中的 webpack 加载器

build/utils.js

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  // added  resolve-url-loaderr with sourceMap true
  const resolveUrlLoader = {
    loader: 'resolve-url-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

在我的 App.vue 中，我可以导入（全局，不能限定范围）

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

我可以检查组件模板中的主题化图标

<h2>Test Themify Icons</h2>
  <div class="row" style="margin-bottom: 30px;">
  <div class="col-4"></div>
  <div class="col-4">
    <span class="ti-email"> Email Me</span>
  </div>
</div>