question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SASS files from NPM modules referencing relative imports won't build

See original GitHub issue

Version

3.7.0

Reproduction link

https://github.com/christophehenry/mrt

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.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:13
  • Comments:21

github_iconTop GitHub Comments

20reactions
robbishopcommented, Oct 21, 2019

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

11reactions
nicojscommented, Aug 27, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack can't resolve relative imports in package
When I import the sass package, at first I had failures because webpack couldn't resolve the node_module references in the imported package.
Read more >
import - JavaScript - MDN Web Docs - Mozilla
The module to import from. The evaluation of the specifier is host-specified. This is often a relative or absolute URL to the .js...
Read more >
less-loader - npm
The loader will first try to resolve @import as relative, if it cannot be resolved, the loader will try to resolve @import inside...
Read more >
gulp-auto-imports - npm
TypeScript icon, indicating that this package has built-in type ... SCSS, JS, Pug, PHP, you name it, it can create an import file...
Read more >
gatsby-plugin-sass - npm
Gatsby plugin to handle SCSS/Sass files. Latest version: 6.3.1, last published: 10 days ago. Start using gatsby-plugin-sass in your project ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found