Sass relative modules not found?

Question

When including a Sass file (in node_modules) in my Vue component <style> tag, the file is located, but any relative modules to that file are not. Everything seems configured correctly, but I'm obviously missing something. What gives?

I've tried installing/uninstalling various Webpack loaders (including css-loader), deleted and reinstalled node_modules, tried various PostCSS configurations, but nothing has made any progress so far.

Thanks in advance.

---

Vue component (IconicIcon.vue):

<template>
  <div>
    <span class="oi oi-icon-name" :title="icon" aria-hidden="true"></span>
  </div>
</template>

<script>
export default {
  name: "iconic-icon",
  props: {
    icon: String
  }
};
</script>

<style scoped lang="scss">
$icon-font-path: "~open-iconic/font/css/fonts";
@import "~open-iconic/font/css/open-iconic-bootstrap.scss";
</style>

open-iconic-bootstrap.scss:

/* Bootstrap */

/* Override Bootstrap default variable */
$icon-font-path: '../fonts/' !default;

@font-face {
  font-family: 'Icons';
  src: url('#{$icon-font-path}open-iconic.eot');
  src: url('#{$icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$icon-font-path}open-iconic.woff') format('woff'), url('#{$icon-font-path}open-iconic.ttf') format('truetype'), url('#{$icon-font-path}open-iconic.svg#iconic-sm') format('svg');
  font-weight: normal;
  font-style: normal;
}

... (snip)

relevant file structure:

root/
  src/
    components/
      IconicIcon.vue
  node_modules/
    open-iconic/
      font/
        css/
          open-iconic-bootstrap.scss
          fonts/
            open-iconic.eot
            open-iconic.otf
            open-iconic.svg
            open-iconic.ttf
            open-iconic.woff

error:

WAIT  Compiling...                                                                                                        8:37:49 PM

98% after emitting CopyPlugin

ERROR  Failed to compile with 4 errors                                                                                    8:37:50 PM

These relative modules were not found:

* ../fonts/open-iconic.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.svg in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.woff in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePos
tLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_module
s/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style
&index=0&id=468ee29c&scoped=true&lang=scss&

package.json:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "concurrently -r -k -n doc,nod,vue -c magenta,green,cyan \"docker-compose up\" \"nodemon server/app.js\" \"vue-cli-service serve\"",
    "build": "vue-cli-service build",
    "start": "node server/app.js",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "apollo-server": "^2.9.15",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.4.1",
    "core-js": "^3.4.3",
    "eslint": "^6.8.0",
    "graphql": "^14.5.8",
    "graphql-type-json": "^0.2.1",
    "jquery": "^3.4.1",
    "js-yaml-loader": "^1.2.2",
    "leaflet": "^1.6.0",
    "lowdb": "^1.0.0",
    "mkdirp": "^0.5.1",
    "mongodb": "^3.4.1",
    "open-iconic": "^1.1.1",
    "popper.js": "^1.16.0",
    "shortid": "^2.2.8",
    "slugify": "^1.3.6",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-e2e-cypress": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "concurrently": "^5.0.2",
    "graphql-tag": "^2.9.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

Answer 1

I solved this by just using the CSS, instead of the Sass. Seems like a copout, but I've spent too much time on this already.

<template>
  <div>
    <span class="oi" :title="icon" aria-hidden="true" :class="`oi-${icon}`"></span>
  </div>
</template>

<script>
export default {
  name: "iconic-icon",
  props: {
    icon: String
  }
};
</script>

<style scoped lang="scss">
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
</style>

Answer 2

This kind of issues could be related to the way that the saas loader works. I've encountered the same problem in one of my projects and resolved it by moving the font directory to the assets folder.

If you google for this you will find that other found the same solution as I am posting here.

In your case you should change the $icon-font-path variable to the following: $icon-font-path: '/assets/fonts/' !default;

It will work!