SCSS

In your project you need to import three files.

Settings

This will make the opinionated settings available in your project.

@import '~@jdi/vue-backoffice-library/src/scss/settings/settings';

Functions

This will make all the required SCSS-functions available in your project.

@import '~@jdi/vue-backoffice-library/src/scss/functions/functions';

Vendors

This will set up all the vendors (iotacss, element-ui and font-awesome).

@import '~@jdi/vue-backoffice-library/src/scss/vendors/vendors';

Availability

All variables are made available "globally" by webpack (with the sass-resource-loader). There is no need to import this file in every scss or vue file.

TIP

A setting is a scss variable for example.

WARNING

Only include settings in these files (above). Do not include anything that will be actually rendered in CSS, because it will be added to every imported SASS file.

DETAILS

This css-rule is exported in every file, this will bloat your filesize!

.example {
  color: red;
}

Only export settings (variables), like this:

$color-red: red;

Overrides

You can override the !default-variables. When you need something, just look inside /src/scss/settings/settings.scss