3
  • 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?

Community
  • 1
  • 1
Michael Joseph Aubry
  • 12,282
  • 16
  • 70
  • 135
  • 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 Feb 24 '14 at 18:43
  • 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 Feb 24 '14 at 18:45
  • I need to google that, I am entering brand new territory. But no I have not tried it. – Michael Joseph Aubry Feb 24 '14 at 18:45
  • If you really want to keep Bootstrap out of your source tree, I recommend using it as a Compass extension instead. – cimmanon Feb 24 '14 at 18:46
  • Sounds like a good idea, I've been looking for reasons to use compass, yet to use it thus far but now seems appropriate, and there is of course a gulp plugin for that. So compass will allow me to import variables, seems like I would have to dig to get that deep, any useful tips? – Michael Joseph Aubry Feb 24 '14 at 18:48
  • 1
    see http://stackoverflow.com/questions/16388506/how-do-the-sass-variables-get-assigned-to-css-selectors-with-foundation-4 and http://stackoverflow.com/questions/15949004/sass-or-less-packaging – cimmanon Feb 24 '14 at 18:52
  • @cimmanon see that they are using require do I use require like they do here https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass.rb – Michael Joseph Aubry Feb 24 '14 at 19:05
  • 1
    @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 Feb 24 '14 at 19:17

1 Answers1

2

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.

Kos
  • 70,399
  • 25
  • 169
  • 233
  • Okay awesome, you say its working let me give it a crack, first I need to actually google symbolic link approach, ill brb. – Michael Joseph Aubry Feb 24 '14 at 18:54
  • Can you give me a tip on symbolic link approach I am not getting it, on information overload. – Michael Joseph Aubry Feb 24 '14 at 19:05
  • Do I just invoke `ln -s ../../vendor/bootstrap sources/sass/` in the command line, and that creates the symbolic link? Maybe I need to be inside the sass dir? – Michael Joseph Aubry Feb 24 '14 at 19:09
  • 2
    The first arg after `-s` is the target path to point to (relative to symlink file location - it's not being resolved at this point), and the second is where to create the link itself. – Kos Feb 24 '14 at 19:23
  • I implemented this `@import "../../../../../../../../../../source/scss-bootstrap/variables";` and it works, obviously ugly, I am going to try your method now. – Michael Joseph Aubry Feb 24 '14 at 19:25