Menu icon Foundation
app.css and small.css

Hello

I've created my app.scss file and it links properly and works nicely now. The thing is I'd like to be able to split the app.css into a separate .css file that I can load first then load the other part of the file later.

scsscss

Hello

I've created my app.scss file and it links properly and works nicely now. The thing is I'd like to be able to split the app.css into a separate .css file that I can load first then load the other part of the file later.

Alexander Assimidis over 4 years ago

Hey, you dont have to seperate them just load them after in your app.scss File other styles which came last are overwrting the others before.

@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
@import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";

// EXAMPLE
@import "custom_styles";
@import "mobile_styles";

owen over 4 years ago

this will output 1 app.css file which is okay but let's say i'd like to have two .css files 1 thats smaller that i can inline or load first, then a secondary .css file that I can load async

Rafi Benkual over 4 years ago

You can create a new file in the CSS or Stylesheet folder. If you link it in the head, it will apply changes.

owen over 4 years ago

If I edit the app.scss file that compiles down to 1 app.css file.

How can I take out some of the scss code from the app.scss and have that limited section of scss file compile down to a new css file.

So i will have a setup like this

app.scss --> app.css
smaller.scss --> small.css

So that I can optimize my css files one for speed and the other just to do all the heavy lifting?

Alexander Assimidis over 4 years ago

Set up a new scss File named smaller.scss and import your scss Files there then compile it.

If you are using Grunt it would be like this

 grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'main.css': 'main.scss',       // 'destination': 'source'
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

If you have any further question or maybe i am understand you wrong then tell me :)

owen over 4 years ago

omg Alexander that was amazing, this is exactly what I was looking for thanks!