vue-cli: SASS files from NPM modules referencing relative imports won't build

Version

3.7.0

Reproduction link

Environment info

Environment Info:

  System:
    OS: Linux 5.0 Fedora 28 (Twenty Eight) 28 (Twenty Eight)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.7.0 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 66.0.4
  npmGlobalPackages:
    @vue/cli: 3.7.0

Steps to reproduce

git clone https://github.com/christophehenry/mrt.git && cd mrt npm i npm run test:unit

What is expected?

Test run correctly

What is actually happening?

sass-loader will crash with error stating relative imports of NPM module can’t be found.

Full stacktrace:

WEBPACK  Failed to compile with 1 error(s)

Error in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&

  Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Can't find stylesheet to import.
    ╷
  8 │ @import "functions";
    │         ^^^^^^^^^^^
    ╵
    ./mrt/node_modules/bootstrap/scss/bootstrap.scss 8:9  @import
    stdin 1:9                                                           root stylesheet
        in http:/localhost/$HOME/mrt/node_modules/bootstrap/scss/bootstrap.scss (line 8, column 9)

 ERROR  mocha-webpack exited with code 1.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 13
Comments: 21

Most upvoted comments

Just occurred to me that this change can be made using webpack chaining. https://cli.vuejs.org/guide/webpack.html#chaining-advanced

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'test') {
      const scssRule = config.module.rule('scss');
      scssRule.uses.clear();
      scssRule
        .use('null-loader')
        .loader('null-loader');
    }
  },
};

Not perfect but than the previous attempt

+20

robbishop on Oct 21, 2019

The only valid workaround I know of is using node-sass instead of dart-sass (with the disadvantages it comes with).

+11

nicojs on Aug 27, 2019