Is the CSS Framework Supposed to Be Automatically Imported in main.scss?

sage
1

I have just started a few test projects using Sage 9 Beta-4. I created three themes – one with Foundation, one with Bulma and the third with Bootstrap. In all three themes I open up main.scss (located in resources/assets/styles).

It doesn’t seem, though, that the main.scss is importing the CSS framework. This is what I see in all three themes:

@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

/** Import theme styles */
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

Am I supposed to @import the framework myself from the nodes_module folder? Or is something not working right here?

Thanks.

2

It doesn’t seem, or it isn’t?

There it is :wink:

3

Okay - got it - thanks.

Now, one more question if I may.

How do I modify Foundations variables? Am I supposed to copy and paste the Foundation settings.scss file somewhere and modify it?

I see that there is a variables.scss file in the common folder. But that is called before import foundation. Won’t foundations global.scss override those variables?

In short, what’s the best practice in terms of modifying foundation using Sage 9.0?

Thanks for your help.

4

And one other question :slight_smile: . I see that Sage is importing all Foundation components:

@include foundation-everything;

Is it possible to only include particular components - i.e., like this:

@include foundation-global-styles;
@include foundation-xy-grid-classes;
//@include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;
@include foundation-typography;
//@include foundation-forms;
@include foundation-button;
ETC.

Again, thanks again for your help.