title: Sass relative modules not found?
body: <p>When including a Sass file (in <code>node_modules</code>) in my Vue component <code>&lt;style&gt;</code> 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?</p>
  
  <p>I've tried installing/uninstalling various Webpack loaders (including <code>css-loader</code>), deleted and reinstalled <code>node_modules</code>, tried various PostCSS configurations, but nothing has made any progress so far.</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p>Vue component (<code>IconicIcon.vue</code>):</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;span class="oi oi-icon-name" :title="icon" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "iconic-icon",
    props: {
      icon: String
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped lang="scss"&gt;
  $icon-font-path: "~open-iconic/font/css/fonts";
  @import "~open-iconic/font/css/open-iconic-bootstrap.scss";
  &lt;/style&gt;
  </code></pre>
  
  <p><code>open-iconic-bootstrap.scss</code>:</p>
  
  <pre><code>/* 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)
  </code></pre>
  
  <p>relevant file structure:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>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&amp;type=style&amp;
  index=0&amp;id=468ee29c&amp;scoped=true&amp;lang=scss&amp;
  * ../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&amp;type=style&amp;
  index=0&amp;id=468ee29c&amp;scoped=true&amp;lang=scss&amp;
  * ../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&amp;type=style&amp;
  index=0&amp;id=468ee29c&amp;scoped=true&amp;lang=scss&amp;
  * ../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&amp;type=style
  &amp;index=0&amp;id=468ee29c&amp;scoped=true&amp;lang=scss&amp;
  </code></pre>
  
  <p><code>package.json</code>:</p>
  
  <pre><code>{
    "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": [
      "&gt; 1%",
      "last 2 versions"
    ],
    "jest": {
      "preset": "@vue/cli-plugin-unit-jest"
    }
  }
  </code></pre>