Importing a .scss(sass) file from another directory?

3
votes
  • source_dir
    • scss
      • styles.scss
    • bootstrap-scss
      • _variables.scss
      • bootstrap.scss

So I am thinking I might just move all the bootstrap.scss files into the main "scss" folder, but thats more a last resort.

My problem is I am trying to import the "_variables.scss" similar to how "bootstrap.scss" does so I can set variables that will effect my main bootstrap.css and my written styles.css with one variable, cool huh? But when I try to import it in source_dir > scss > styles.scss I get an error.

// Failed
@import "variables";

// Failed
@import "../bootstrap-scss/variables";

Now lastly, I am using gulp to compile so I don't really want to watch the files, that was the chosen answer here SASS: Import a file from a different directory? I need to read some more on that post, but there has to be a good way to import these days?

1
javascriptsassgulp
I understand you'd like to keep Boostrap away from your codebase; have you tried to create a symbolic link to bootstrap somewhere in scss? - Kos
Either way, the -I suggestion from linked question should still be useful to you- you'd just need to somehow tell Gulp to pass this flag during compilation. - Kos
I need to google that, I am entering brand new territory. But no I have not tried it. - Michael Joseph Aubry
see stackoverflow.com/questions/16388506/… and stackoverflow.com/questions/15949004/sass-or-less-packaging - cimmanon
@MichaelJosephAubry The require is done within config.rb (this is a file generated by Compass that contains your configuration -- things that are typically set via command line flags when using Sass). - cimmanon

1 Answers

2
votes

I've tried out the symbolic link approach I suggested in a comment earlier, and it seems to work. Here's an example folder structure:

.
├── sources
│   └── sass
│       ├── bootstrap -> ../../vendor/bootstrap
│       └── style.scss
└── vendor
    └── bootstrap
        └── _variables.scss

in style.scss:

@import "bootstrap/variables"

I've created the (relative) symbolic link with ln -s ../../vendor/bootstrap sources/sass/ and Sass picks up the location correctly.