Menu icon Foundation
Adding custom SCSS components to app.scss

I read an article on the Foundation site that I can't seem to find anymore about organizing your SCSS files within foundation to ease compiling and importing. I'm fairly certain it was written by Rafi and gave an example that put a bunch of nav, hero, and other SCSS files into the components folder. It looked something like this:

@import
    'mixin1',
    'mixin2';

@import
    'hero',
    'nav-main',
    'nav-other',
    'footer';

And then the folder structure was simply something like this:

/SCSS
--/Components/
----/_hero.scss
----/_nav-main.scss
----/_nav-other.scss

Something like that...

My issue is that I can't, for the life of me get this working.  The only way the @import works is if I specify the components folder (e.g. @import 'components/hero') for every one. I can't get the process showed in the article to work and I can't find the article anymore either.

Thoughts? Suggestions?

 

 

scsscomponentsFoundation for Sitesimports

I read an article on the Foundation site that I can't seem to find anymore about organizing your SCSS files within foundation to ease compiling and importing. I'm fairly certain it was written by Rafi and gave an example that put a bunch of nav, hero, and other SCSS files into the components folder. It looked something like this:

@import
    'mixin1',
    'mixin2';

@import
    'hero',
    'nav-main',
    'nav-other',
    'footer';

And then the folder structure was simply something like this:

/SCSS
--/Components/
----/_hero.scss
----/_nav-main.scss
----/_nav-other.scss

Something like that...

My issue is that I can't, for the life of me get this working.  The only way the @import works is if I specify the components folder (e.g. @import 'components/hero') for every one. I can't get the process showed in the article to work and I can't find the article anymore either.

Thoughts? Suggestions?

 

 

ahmed abuzeid over 1 year ago

thanks for sharing

John Stephanites over 1 year ago

I put the _custom.scss in the src-> assets->scss folder and then you need to add @import 'custom'  to the app.scss file in the src folder ot the dist folder. I do not know if this is what you are talking about but I don't break them up. I would think that you could but would have to use this method and I wouldn't think you couldn't add a folder to the layer of complexity.  I add mine right below the motion ui and it seems to work for me. https://www.youtube.com/watch?v=t_ekdBMj4cc

Derek Paul over 1 year ago

That's exactly the problem, though. You should be able to just write

@import 'custom'

and have it work. Unfortunately, for some reason, that doesn't. I need to specify the path before it works.

 

John Stephanites over 1 year ago

I have been running into problems lately with the gulp process not recognizing my chances. Sometimes I have to go as far as shutting it down and restarting and even that doesn't work. Sounds very similar. If you figure it out let me know please. Thanks.

ritariya 5 days ago

I was constantly searching through many sites to know how to add the custom SCSS components to app.scss. Accidentally I have seen the post and me acme to know about the methodologies and techniques to add the custom SCSS. You have mentioned some codes and strategies to add the custom. Thanks for sharing the post.  cheap real diamond rings