feat(SCSS): Use absolute import paths for node packages
feat(SCSS): Use absolute import paths for node packages
Importing in SCSS is fun.
As a background: In the node world importing from a package / dependency
has a special meaning. If you import from: package/example
, it goes
looking into node_modules/package/example
. lib-sass, the underlying
SASS engine of node-sass and our rails counter-part sassc-rails,
doesn't have the notion of this module resolution, so it would look into
the local path ./package/example
.
In order to circumvent this, we decided to resolve relative to the
current file, e.g. by navigating to
../../node_modules/package/example
. This however has the serious
downside that our package name is @gitlab/ui
, the slash is actually
translated to one more folder. So every package that utilizes
@gitlab/ui
would need to import
../../../node_modules/package/example
.
Now for a solution, we could tell lib-sass, that instead of just looking
relative to the current file, it should also look relative to
node_modules
. This is made possible by the includePaths setting of
node-sass on the node side, which we utilize for GitLab UI itself. It is
also possible for the rails side, by setting config.assets.paths to
include node_modules
.
BREAKING CHANGE: Everything relying on the relative paths in SCSS can break