How to Handle Partials in an SCSS Project

Partial Compiling of SCSS file into CSS

This is how I get it to work. I changed the scss file's code to something much simpler and made sure that the bootstrap.scss is located correctly. The one issue I found is that no matter what you do, u must @import the bootstrap file at the end. I dont know how to import only necessary files.

// 2. Include any default variable overrides here
$body-color: rgb(238, 79, 30);
$body-bg : rgb(230, 224, 224);

// // 3. Include remainder of required Bootstrap stylesheets
@import  "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

$custom-theme-colors: (
"altlight": rgb(189, 163, 194),
"altdark" : rgb(170, 90, 163)
);

$theme-colors : map-merge($custom-theme-colors , $theme-colors );

@import "../../node_modules/bootstrap/scss/bootstrap";

SASS doesn't compile when one partial uses variable declared in another partial

It's very simple. You're importing the partials in the wrong order. Import the variables first (always), then the rest of the partials that make use of the variables.

sass\main.scss

@import "abstract/variable";
@import "base/typography";

PS: The file should be called variables (plural).

import of SASS partials in Angular2 components

This is a good approach. Every .scss file in your project should know it's dependencies, that's why the @import is always good.

What you can improve is adding the partials to the includePaths (if you use node-sass), that you can directly use @import 'partials'; instead of @import '../../my/long/path/to/partials'; or do the styles as a single file (not component level styles).

PhpStorm SCSS trigger compilation on partial change

Based on your info and investigation: you are using nested "Source" folder (on scss) and $SourcepathEntry$ & related macro... which does not seem to work as you expected in your IDE version.

Get rid of it -- your setup does not need it at all. Your folder structure is pretty standard so it can be resolved using more "standard" ways.

• Disable this File Watcher for now (you may delete it later) and make new one.
• There try $FileDirPathFromParent()$ parametrized macro (it accepts parameters). For example for $FileDirPathFromParent(src)$ it returns foo/bar for some/path/src/foo/bar/baz.scss file path. This macro should do the job when making the needed path.

---

Related Topics