Anyway to wrap @use like we can with @import

[ggedde]

I like the new @use syntax, but I ran into one issue. When using a cms page builder I don't want my css to override the page builder ui components, but do want my css to be used in the page builder preview.

So I was previously able to this:

main.scss

@import 'my-scss-variables';
@import 'my-scss-mixins';

body#front-end,
.page-builder-preview-container {
    @import 'my-scss-part-1';
    @import 'my-scss-part-2';
}

However, with @use we cannot do this as it requires @use at the top of the file.

main.scss

// Not needed here anymore as instead in each partial - @import 'my-scss-variables';
// Not needed here anymore as instead in each partial - @import 'my-scss-mixins';

body#front-end,
.page-builder-preview-container {
    @use 'my-scss-part-1'; // Error
    @use 'my-scss-part-2'; // Error
}

I understand that this is not the best approach, but sometimes this is a limitation of CMS or Page Builder we are using for our clients. If I was creating the SCSS from scratch this might not be as big of a deal, but I am trying to import a css library and since the css library has no clue as to which cms or page builder I am using they aren't thinking of that or adding that to their code.

So it might be like this: main.scss

body#front-end,
.page-builder-preview-container {
    @use '../../node_modules/@some-library/scss-part-1'; // Error
    @use '../../node_modules/@some-library/scss-part-2'; // Error
}

Is there any way around this with @use or @forward?

If there isn't, then I think one should be addressed before @import is deprecated.

Thanks

[ggedde]

I have found a temporary workaround, but it requires @import which will be removed soon. So we would still need a permanent solution eventually.

You will need to create a separate file:

_block.scss

@use '../../node_modules/@some-library/scss-part-1';
@use '../../node_modules/@some-library/scss-part-2';

Then in main.scss

body#front-end,
.page-builder-preview-container {
    @import 'block';
}

• Note this is different then importing the css library partials in main.scss as that could break the css libraries rendering hierarchy.

• One caveat I found is that it doesn't render nested mixins correctly. This might be a bug in sass or an unconventional use not covered by sass.

[jathak]

You can use the meta.load-css mixin for this, which allows you to load the CSS but not the Sass members from a file

[ggedde]

This worked perfectly, Thanks