Skip to main content

@roots/bud-sass

Sass support can be added by installing the @roots/bud-sass extension.

Installation

yarn add @roots/bud-sass --dev

Usage

After installation, sass will automatically preprocess any .scss or .sass modules in your project with sass.

Additionally, if @roots/bud-postcss is available, postcss will be applied to your .scss and .sass source files.

If you are using @roots/bud-preset-recommend, @roots/bud-preset-wordpress, or @roots/sage then postcss is automatically applied.

Global imports

Use the bud.sass.importGlobal function to ensure a module is made available throughout your sass stylesheets, regardless of scope.

bud.sass.importGlobal('@src/styles/variables')

If you have more than one stylesheet to import, you may use an array:

bud.sass.importGlobal([
'@src/styles/variables',
'@src/styles/mixins',
'@src/styles/functions',
])

Global values

Use the bud.sass.registerGlobal function to ensure global styles are made available throughout your sass stylesheets, regardless of scope.

This function differs from bud.sass.importGlobal in that it can be passed arbitrary values.

bud.sass.registerGlobal('$foo: rgba(0, 0, 0, 1);')

If you want to divide these values up using an array, you may do so.

bud.sass.registerGlobal([
'$foo: rgba(0, 0, 0, 1);',
'$bar: rgba(255, 255, 255, 1);',
])

URL imports

When using @roots/bud-sass, you will find that the url() function is not working as expected. This is because the url() function is relative to the target file, not the source file and Sass does not support url rewriting.

A few options are available to work around this.

Strategies

prefix with ~

The ~ prefix is a convention used to indicate that the path should be resolved by webpack. It works with aliases.

Let's say you have an alias set up for @fonts:

url(~@fonts/muh-font.woff)

use an absolute path

bud.js will resolve absolute paths to whatever you have set as the @src directory.

url(/fonts/muh-font.woff)

use a relative path

This is the simplest option to understand and the most annoying to maintain. It is on you to ensure that the relative path is correct.

url(../fonts/muh-font.woff)