Multiple component Sass files

If you are looking for splitting up your component Sass in to multiple files, you have 2 options.

Ask yourself: do you want to end up with multiple CSS files or just with 1 CSS file made up from multiple Sass files?

Multiple CSS files #

There is no limit to how many .scss files you can have inside a component. If the component could benefit, from splitting it up a .scss file, you have the flexibility to do so. Each .scss file you create will create its corresponding .css file.

Remember in this case to link both CSS files in yourlibraries.yml!

my-component

dist

my-component-theme.css

my-component-layout.css

my-component-theme.scss

my-component-layout.scss

libraries.yml

my-component:
  version: VERSION
  css:
    component:
      dist/my-component-layout.css: {}
      dist/my-component-theme.css: {}

Sass partials #

If you don't want multiple CSS files, you could choose for using partials. The Gulp setup is smart enough to not compile .scss files that start with an underscore _.

my-component

dist

my-component.css

_scss-partials

_layout.scss

_theme.scss

my-component.scss

@import "sass-essentials";
@import "_scss-partials/_layout";
@import "_scss-partials/_theme";

.my-component {...}

libraries.yml