Make @import Paths Relative

[tajmone]

I'm using normalize-scss (typey-chroma-kss fork) in a project. I didn't install the lib, just copied the relative sass folders into my project.

When I built the project I get error imports with a few files — for example in normalize-scss/base/grouping/_grouping.scss

// Dependencies.
@import 'components/divider/divider';

... because normalize-scss is not on Sass Load Paths.

I've solved it by adding normalize-scss' path to the SASS_PATH environment variable — on Windows:

SET "SASS_PATH=%~dp0vendors\normalize-scss"

And of course, it could be set via Sass command line options too.

I think that changing the dependencies @import paths to relative paths would be a better solution:

// Dependencies.
@import '../../components/divider/divider';

... this would allow normalize-scss to work out of the box without having to set Sass Load Paths; and it shouldn't create any problems for those who installed normalize-scss via NPM, Ruby Gem, etc.

It's just a small issue, for which there is an easy solution, but — unless preserving dependencies import paths the wat they currently are is really necessary — it would make its out-of-the-box use neater and simpler, and also avoid any potential clashes with other similar named modules on Sass Load Paths.

[JohnAlbin]

because normalize-scss is not on Sass Load Paths.

You are supposed to copy the contents of the https://github.com/JohnAlbin/normalize-scss/tree/master/fork-versions/typey-chroma-kss into your Sass folder.

It sounds like you have a my-sass-folder/typey-chroma-kss folder? Move the contents of the typey-chroma-kss folder into your Sass folder directly. Your Sass folder is part of your import path, yes?

[tajmone]

Yes, for a number of reasons I chose to copy the normalize-scss (typey-chroma-kss) directly in my repo project:

https://github.com/tajmone/pb-archives-test/tree/source/_assets/theme/_sass/vendors/normalize-scss

I've edited:

• /vendors/normalize-scss/base/grouping/_grouping.scss (Line 2):

  @import '../../components/divider/divider'; // <= Relative path changed!
  // @import 'components/divider/divider';
  

• vendors/normalize-scss/base/forms/_forms.scss (Line 94):

  @import '../../forms/button/button'; // <= Relative path changed!
  // @import 'forms/button/button';
  

... and it works fine. I think that these changes would also work if normalize.scss was installed, or placed in the Sass folder, this being the reason why I proposed to change the paths to relative paths.

[JohnAlbin]

Thanks for the reply. I'll consider this for the next point release.