Sass support can be added by installing the @roots/bud-sass extension.
yarn add @roots/bud-sass --dev
npm install @roots/bud-sass --save-dev
After installation, sass will automatically preprocess any
.sass modules in your project with sass.
Additionally, if @roots/bud-postcss is available, postcss will be applied to your
.sass source files.
If you are using @roots/bud-preset-recommend, @roots/bud-preset-wordpress, or @roots/sage then postcss is automatically applied.
bud.sass.importGlobal function to ensure a module is made available throughout your sass stylesheets, regardless of scope.
If you have more than one stylesheet to import, you may use an array:
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.
'$foo: rgba(0, 0, 0, 1);',
'$bar: rgba(255, 255, 255, 1);',
@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.
~ 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
use an absolute path
bud.js will resolve absolute paths to whatever you have set as the
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.