Vue.js webpack - How to use themify-icons? - vue.js

Question

I added the package
yarn add themify-icons-sass
then in my component , I imported it in the script and in the style
<script>
....
import 'themify-icons-sass'
<style lang="scss" scoped>
#import 'themify-icons-sass/themify-icons';
...
but I get a build error
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
Where am I wrong in the import ? thanks for feedback
UPDATE
First, if I want o import it from ./node_modules , then the #import should NOT BE in a scoped style...
So I moved it to a global style in my App.vue
<style lang="scss">
#import "~themify-icons-scss/scss/themify-icons.scss";
#app { ...
Then I got an erro , the node-sass/vendor directory was not bulit.. so I add to rebuild node_sass
yarn add node-sass --force
Now it's taking in account the package but I get another error related to the relative path to the fonts:
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
the themify-icons-scss file structure is the following :
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 {
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;
this is where there is some issue... with the $ti-font-path as defined in the variables, relative to the scss directory in the package..
themify-icons-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>