SCSS setup. Import SCSS files

bud
1

Trying to get SCSS working. I can’t import SCSS files to app.scss

I get TypeError: Cannot read property 'assets' of undefined when yarn build.
No stylelint yet installed.

#package.json
  "devDependencies": {
    "@roots/bud": "5.7.6",
    "@roots/bud-postcss": "^5.7.7",
    "@roots/bud-sass": "^5.7.7",
    "@roots/bud-tailwindcss": "5.7.6",
    "@roots/sage": "5.7.6"
  }

#bud.config.js
entry({
  app: ['@scripts/app', '@styles/app'],
  editor: ['@scripts/editor', '@styles/editor'],
})

.assets('images', 'fonts')

bud.config.js In github

#app.scss
 @import 'fonts/giraldez'; //<-----the error happens here. Commenting this line, it works

body {
  .brand {
    font-family: 'Giraldez', sans-serif;
    font-weight: 900;
    font-size: 50px;
  }
}

app.scss in github

2

It was a path issue in the @font-face declaration:

'../fonts/Barlow_Condensed/BarlowCondensed-Black.woff2'

instead

'../../fonts/Barlow_Condensed/BarlowCondensed-Black.woff2'
3

You can save yourself a bit of pain with the @fonts alias:

url(~@fonts/Barlow_Condensed/BarlowCondensed-Black.woff2)

Also works for @images, same way. I believe the ~ is only required when using scss.

3 Likes