Setting up Support for Sass

Add the @roots/bud-sass extension:

yarn add @roots/bud-sass --dev

WARNING

Note: Verify that all Bud packages and the @roots/sage package versions are the same in your package.json to prevent build errors.

In the resources/styles directory, rename app.css to app.scss and rename editor.css to editor.scss.

app.css -> app.scss
editor.css -> editor.scss

TIP

Note: url() imports in Sass behave differently than CSS. We recommend prefixing aliases with a tilde (eg. url('~@images/...')). We also recommend adding the fonts directory to bud.assets().

Configure Stylelint (optional)

Install @roots/bud-stylelint:

yarn add @roots/bud-stylelint --dev

Create a Stylelint config file at .stylelintrc.cjs:

module.exports = {
  extends: ['@roots/bud-sass/config/stylelint'],
  rules: {
    'import-notation': null,
    'no-empty-source': null,
  },
};

Maintaining Stylelint config

When bud.js updates you will automatically be upgraded to the latest versions of stylelint-config-standard and stylelint-config-recommended-scss. This may cause issues if you are now breaking a newly defined or changed rule. You will either want to make changes to your application or add an override to module.exports.rules.

This is normal. The preset is just supposed to be a base for your own config. There is nothing wrong with overriding rules to suit your preferences or your application's needs.

You could also:

• Not use the @roots/bud-sass/config/stylelint preset and maintain your own config entirely. This will give you maximum control over when updates are applied.
• Make an issue with stylelint-config-standard or stylelint-config-recommended-scss if you disagree with the change.

What you shouldn't do:

• Make an issue in roots/bud (We want to override upstream configurations as little as possible so as to provide a predictable starting point for a large number of diverse projects).