Skip to content

feat(SCSS): Use absolute import paths for node packages

Lukas 'ai-pi' Eipert requested to merge leipert-absolute-scss-paths into master

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

Edited by Lukas 'ai-pi' Eipert

Merge request reports