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 7 months ago

thanks for sharing

John Stephanites 7 months 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 7 months 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 7 months 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.