I’m doing a project using SCSS and I also wanted to load dependencies with NPM.
Two of the dependencies I use, which would normally just be loaded by putting their files in my /assets/ folder, is Foundation and Normalize.
In my site and have two folders:
/assets/
/src/
In assets I’ll have typical /css/, /images/, /js/, etc. In /src/ is where I install NPM modules and other source files.
So that gives me /src/node_modules/.
I also create my own SCSS files as /src/scss/main.scss with various subfolders.
All that said, working with my own SCSS files is perfectly normal, using relative paths, I just type `@import “components/nav-menu” or whatever, and it works.
But now I need to import my node modules for Foundation and Normalize, and crap hits the fan!
When you install Foundation with NPM it goes into /src/node_modules/foundation-sites/ and there is an /scss/ folder in there. Great, I can @import to that path, I just need a couple …/…/ to get there. But that isn’t how you use Foundation. They have a settings SCSS file for including just the parts you want, and making adjustments to the framework.
The settings file is not in the node folder, you download it separately, so I add that into my own /src/scss folder. But alas, the @import statements in the Foundation settings file are written relative to the Foundation source files! I’m not renaming all the includes in the entire file! Though I suppose that is probably how they designed it to be, dunno.
I happen to be on Windows and I’m using Koala to watch and auto-compile my SCSS. But working with these path issues is freaking annoying!
To make matters worse, when you install Normalize.css with NPM, it has no SCSS at all, just the CSS file. That’s fine, as you can @import a CSS file, but the compiler just compiles it to a normal old CSS @include statement, rather than literally including the CSS and minifiying it with the rest of my styles. Useless! The point of all this is to compile down to a single file.
To get around the path madness, people have gemfiles and settings adjustments to libsass and command line tools and Grunt configs and alternate workflows and bla bla bla. I don’t want all that, I need this project to be fairly portable, move it to another server and if someone else has a SCSS compiler, it will follow all the paths without extra config.
I’m about to call it quits on this “modern” stuff and just stick the minified Foundation and Normalize.css files directly in my own /assets/ folder and include them in the site like old school.
It should not be this complicated, I feel I must be missing something! If I am to install CSS tools via NPM and use modern SASS whatever, all these files can’t just NOT find each other, without loading even more automation tools. It’s pathetic! If I were the author of SASS, I would think to create a simple directive like “search in these folders when I type @import commands, k thx”. But is there such a directive? Not that I’ve found.
There are settings or directives when using certain command line watchers, but I don’t want the configuration to live in the watcher, I want it to live in the SCSS files themselves, to make the project more portable and not screw up someone else trying to compile the SCSS.
Why isn’t there something like this:
@importpath "../../src/node_modules/foundation-sites/scss"
@import "settings/foundation-settings" // << references paths that would be in the above path
@import "foundation" // << gets found also in the importpath
Something like that would solve tooling issues, custom configs in different environments, etc etc.
What am I doing wrong here?