Solve sass dependencies import parths

[renatodeleao]

Note: this issue is only seen while importing @whitemsith/qnorr-styles/scss/qnorr.scss in some specific contexts. Check this comment for explanation

description

We have two external dependencies mappy-breakpoints and normalize.css and they are both imported at qnorr.scss

// current qnorr.scss

@import "../node_modules/mappy-breakpoints/_mappy-breakpoints";

@import "../node_modules/normalize.css/normalize";

This will of-course fail when our package is imported from other websites, that don't have node_modules path resolving. So the path will be:

node_modules/@whitesmith/qnorr-styles/node_modules/mappy-breakpoints/_mappy-breakpoints

Possible workarounds (there's no solution, at least i couldn't found one)

We can beautify this using custom importers for node-sass and have pretty paths, but then we assume that the parent project need to have that configuration.
Apparently there's no de facto solution of module resolving for sass modules. the tilde ~ is the most default at webpack | parcel but there people that use @ as alias as well so we could never know.

A list of current workarounds:

• include the package inline (as we did before), by copy and pasting to a vendor folder
• try eyeglass
• Add a sass variable to customize the path prefix ("~", "@", "./node_modules) edit: this unfortunatelly is not possible

Sass Issues to track

• Origin
• Dynamic Dependencies sass/sass#739
• Add a module system sass/sass#1094

Related issues and links for study

• Path to sass-mq is dependent on specific node_modules location alphagov/govuk-frontend#636
• Loading transient sass modules through npm webpack-contrib/sass-loader#227
• Update SassMQ import path alphagov/govuk-frontend#637
• Nested dependancies not loaded rails/webpacker#1951
• includePaths: ['node_modules'] doesn't work for scoped packages sass/node-sass#1596

-webpack-contrib/sass-loader#479

[renatodeleao]

Update: https://css-tricks.com/introducing-sass-modules/