SASS files from NPM modules referencing relative imports won't build
See original GitHub issueVersion
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:
- Created 4 years ago
- Reactions:13
- Comments:21
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Just occurred to me that this change can be made using webpack chaining. https://cli.vuejs.org/guide/webpack.html#chaining-advanced
Not perfect but than the previous attempt
The only valid workaround I know of is using
node-sass
instead ofdart-sass
(with the disadvantages it comes with).