Having trouble importing scss partials

sage
1

I’m using sage version 10.1.7 and while trying to write some custom scss. In previous versions the app.scss wass already present and I could just @import partials.

Now however, there’s only a .css file and when I try to rename it to app.scss, I get an error Can't resolve '@styles/app'.

Only way I can do includes is like the example below, however, there’s a problem if those files have their own includes, which again don’t work.
Also, when I add an external package and try to include its scss, but it doesn’t work

How do I import my partials, so that they work with scss as in previous versions of sage?

Bud dev dependencies are on version 5.8.7
My imports currently look like this (_index.scss has other partials imported):

@import 'tailwindcss/base';

/* vendors */
@import './vendors/_fonts.scss';
/* components */
@import './components/_hero-banner.scss';
@import './components/_header.scss';
/* base styles */
@import './base/_buttons.scss';
@import './base/_root.scss';

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
2

Have you already added the bud-sass extension?

1 Like
3

That worked. Thanks.
I’m curious why it’s not included by default though?

4

Because sass has to be compiled during install, which is slow, and a lot of people don’t need it. Postcss offers a lot of the same features (you can use nesting, imports, throw in the advent of custom properties and it’s just unnecessary for everyone not using calc, extend or mixin).

Even then, they might want to use plugins like these instead:

3 Likes