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 { ...

然后我得到了一个erro，node-sass / vendor目录不是bulit ..所以我添加到rebuild 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-图标-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-图标-SCSS / SCSS / themify-icons.scss

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

themify-图标-SCSS / SCSS / _path.scss

@ font-face { font-family：'themify'; SRC：URL（ '＃{$ TI-字体路径} /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'）; font-weight：normal; font-style：normal;

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

themify-图标-SCSS / SCSS / _variables.scss

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

}

Answer 1

SOLVED...

there is a nice recent package ( updated 3 months go, I forked it as an archive for me ..). see themify-icons-scss

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

to solve the issue with the relative font path variable in the package _path.scss , I added the package resolve-url-loader. ( see resolve-url-loader on github

 yarn add resolve-url-loader --dev

And as per the resolve-url-loader readme, as I want to use webpack loaders I inserted into build/utils

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
    }
  }

In my App.vue I can import (global , cannot be scoped)

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

And I can check the themify-icons in my component template

<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>

Vue.js webpack - 如何使用themify-icons？

1 个答案: