SASS Mixin and Variables not working

sage
,
1

Hello, I just installed Sage 10.4.0 and followed this guide to remove tailwind and stopped after installing @roots/bud-sass because I don’t want bootstrap. I also renamed the app.css file to app.scss and renamed editor.css to editor.scss.

Everything seems to be working up to the point I tried using sass mixins and variables. In my bud.config.js added app.sass.importGlobal("@src/styles/variables").

When I inspect by styles on chrome I get:
Screenshot 2023-01-24 at 5.13.33 PM
Screenshot 2023-01-24 at 5.44.23 PM

My package.json:

  "devDependencies": {
    "@roots/bud": "6.7.1",
    "@roots/bud-eslint": "6.7.1",
    "@roots/bud-postcss": "6.7.1",
    "@roots/bud-prettier": "6.7.1",
    "@roots/bud-sass": "6.7.1",
    "@roots/bud-stylelint": "6.7.1",
    "@roots/eslint-config": "6.7.1",
    "@roots/sage": "6.7.1"
  },

I tried updating bud using yarn run bud upgrade but had no luck.

I am using node 18.12.1 and yarn 1.22.19

I’m not getting any errors on my terminal and don’t know what else to do. Has someone else run into this problem?

Thanks in advance!

2

Hmm, I am using Foundation for my front-end framework, so I had to follow most of the same steps. I am not having any issues using Sass or compiling. To see if it helps, I will just provide some of my settings/setup for you.

  1. Here is my package.json file
{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/bud": "^6.6.10",
    "@roots/bud-sass": "^6.6.10",
    "@roots/sage": "^6.6.10"
  },
  "dependencies": {
    "@fancyapps/ui": "^4.0.31",
    "foundation-sites": "^6.7.5",
    "motion-ui": "^2.0.4",
    "slick-carousel": "^1.8.1",
    "what-input": "^5.2.12"
  }
}
  1. My bud.config.js file I didn’t need to really add anything special, be sure to check your public path, and that your entry points aren’t altered. The only tweak I made was: .watch('resources/views/**/*', 'app/**/*')
  2. My app.scss file can be seen here (has mostly Foundation imports: Sage app.scss (Foundation) · GitHub) however, at the end I import my own custom theme.scss file which that imports all my custom .scss files (variables, mixins, component styles, block styles, etc.
  3. I run nvm use 16 and either yarn dev or yarn build.

Happy to try and help troubleshoot if this doesn’t work for you! Good Luck!

2 Likes