Is there a way to support "@use" from sass?

[larrotta69]

I know sass is currently using dart-sass which supports "@use": https://sass-lang.com/documentation/at-rules/use

Here is my rollup configuration:

postcss({
  plugins: [autoprefixer()],
  extract: false,
  modules: true,
  use: ["sass"]
})

But if I use this in the scss file

@use "./vars.module";

.header {
  height: vars.$size-base;
}

I got (plugin postcss) Error: Invalid CSS after " height: vars": expected expression (e.g. 1px, bold), was ".$size-base;"

It does work perfectly using @import but it will be deprecated

@import "./vars.module";

.header {
  height: $size-base;
}

[yaquawa]

Same issue here, switched to this plugin solved the problem.
You can specify the sass compiler by yourself.

https://github.com/thgh/rollup-plugin-scss

[Mister-Hope]

Same issue here, switched to this plugin solved the problem.
You can specify the sass compiler by yourself.

https://github.com/thgh/rollup-plugin-scss

How can I specify it?

Edit: Do you mean stop using rollup-plugin-postcss and using roll-up-plugin-scss instead?

[yaquawa]

Do you mean stop using rollup-plugin-postcss and using roll-up-plugin-scss instead?

yes.

[Mister-Hope]

Thanks for your reply. But how can I bundle styles in js with roll-up-plugin-scss? I did not find a way to do it. I saw your issue in vuejs/rollup-plugin-vue#410 Do you find out a way to output one js file with vue using scss?

[yaquawa]

I couldn't find a way to inject css into js.