Menu icon Foundation
Will _settings.scss get overwritten every time I update Foundation via Bower?

If I make changes to the _settings.scss file located in the bower_components folder, will that file be overwitten every time I update Foundation? If so, it seems like a bad solution.

setttingsbower

If I make changes to the _settings.scss file located in the bower_components folder, will that file be overwitten every time I update Foundation? If so, it seems like a bad solution.

Rafi Benkual almost 4 years ago

In the SCSS folder you have a settings file. That is the one you would use and is not overwritten. Everything in bower_components is overwritten on updates.

scss
  _settings.scss
  app.scss

It's explained in more detail here: http://foundation.zurb.com/docs/sass-files.html

Cathal almost 4 years ago

The perfect answer. Thanks for the link!

Russell over 3 years ago

but the scss folder is INSIDE bower_components, so the advice above contradicts itself, as that says it will still be overwritten...

Brian Tan over 3 years ago

The one that rafi talked about is the scss folder at project root directory for basic sites template. For Zurb sites template, it's src/assets/scss.

Russell over 3 years ago

Hi Brian, Rafi,

Thanks for your replies. I think its just a simple misunderstanding. Maybe not everyone installs it using Bower.

I am using Foundation for Sites which is pulled in via bower. This means there is NOTHING foundation related in my website's root folder. /src/assets/scss is not there.

The reason is simple, because foundation is installed via Bower, this means everything is under a foundation folder in bower_components. Hence my question was: "How do I edit this settings file when its in bower_components, because as Rafi says, everything in there is overwritten on updates."

For anyone else coming across this issue. The solution is also simple, although initially it did not seem that simple, as I was not sure how it all linked together.

However, all you have to do is copy the _settings.scss file into the website directory of your site/app, and then simply include it into an existing SCSS style file you are already using, using the @import command, or you can concatentate it using Grunt/Gulp.

The way we did it was using Grunt.
So the concatenation order was:
1. yahooreset.scss - Yahoo Reset version 3
2. _settings.scss - file copied from bower_components into my application folder.
3. app.scss - main application scss file
4. components//.scss - component based scss files for working with angular JS.

After more detailed reading of the Foundation for Apps Docs, there is actually a single line that confirms this settings file can simply be copied from bower_components.


The Settings File

All Foundatiion projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Apps project, you can find the settings file under client/assets/scss/. [b]If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.[/b]

Hope this helps clear up what I was actually asking for, and I hope it explains the possibly frustrated replies I have given when it seemed nobody understood what I was trying to explain.

Russell over 3 years ago

Eek! No idea why that text is SO LARGE lol. Sorry!