Roots/Sage 10 - how to import sass variables with new bud.config.js?

Hello,

Just installed the 10 version of Roots/Sage.

My style directory looks like this :

  • styles/
    • common/
      • _variables.scss // I defined sass variables here
      • _global.scss // I use variables defined in _variables.scss
    • app.css

In ‘app.css’, I import ‘_variables.scss’ and ‘_globals.scss’.

I can’t reach variables defined in _variables.scss in _global.scss. Like I use to do in roots/sage previous version.

How can I reach variables defined in _variables.scss in others files (I don’t want to import every time this file) ?

First you’ll want to make sure you have the SASS bud extension installed.

yarn add @roots/bud-sass @roots/bud-postcss --dev

Then based on the structure in your comment you will want to rename app.css to app.scss and the import statements would look like this:

app.scss

@import './common/variables';
@import './common/global';

// the rest of your css rules
2 Likes

It looks like you should be able to prepend the import to all of your SASS files like so as well if that’s what you are looking to do.

bud.config.js

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = (app) => {
  app
    .tap((app) =>
          app.build.items.sass.setOptions({
            additionalData: '@import "@styles/common/variables";',
          }),
        )
  // rest of bud config
};

You can find more detail about the additionalData option here

2 Likes

Nice it works :smiley:

Thanks a lot @zzzap !

Do you know how to import a scss file if you go this route?
I added this to my app.scss file;

$aos-distance: 1rem;
@import '~aos/src/sass/aos';

But results into an error;

bridge.js:137 Invalid HMR message: {"name":"bud","action":"sync","time":2525,"hash":"60ea35e8c749867c0764","warnings":[],"errors":[{"moduleIdentifier":"/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[1]!/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[2]!/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[13].use[3]!/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[4]!/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/resources/styles/app.scss","moduleName":"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[13].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[4]!./resources/styles/app.scss","message":"Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nError: Failed to find '~aos/dist/aos.css'\n  in [\n    /Volumes/Sites/theme-name.nl/web/app/themes/theme-name/resources/styles\n  ]\n    at /Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/postcss-import/lib/resolve-id.js:35:13\n    at async LazyResult.runAsync (/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/postcss/lib/lazy-result.js:396:11)\n    at async Object.loader (/Volumes/Sites/theme-name.nl/web/app/themes/theme-name/node_modules/postcss-loader/dist/index.js:97:14)"}],"modules":{"undefined":"./node_modules/imagesloaded/imagesloaded.js"}}
TypeError: strip is not a function

Whenever I click the import link in my editor it does find the file. I really want to use the latest version of Sage/Bud, it’s a shame they ditched Browser Sync and SCSS support by default.

Sage is a starter theme. What’s stopping you from maintaining your own version that has these things?

You can use Browsersync with Bud - there’s several examples provided by myself and Kelly on both this forum and on GitHub

There are just a few steps needed to switch to Sass, if that’s what you’re wanting to use.