DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

[Asken]

I'm trying to use latest sass but rollup-plugin-scss doesn't seem to support it as the new function is sass.compileString.

rollup-plugin-scss/index.ts

Line 86 in bf6f203

const render = sass.renderSync(

packeges,json

"sass": "^1.77.8",
"rollup": "^4.28.1",
"rollup-plugin-sass": "^1.14.0",
"rollup-plugin-scss": "^4.0.1",

My rollup dev:

import scss from 'rollup-plugin-scss'
...
plugins: [
  scss({
    include: ['src/**/*.scss'],
    output: 'public/bundle-dark.css',
    // insert: true
    data: '@import "src/_theme-dark-variables";',
    compress: true,
  }),
]

Gives the following error message:

DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
[0]
[0] More info: https://sass-lang.com/d/legacy-js-api
[0]
[0] DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
[0]
[0] More info and automated migrator: https://sass-lang.com/d/import

If I instead use rollup-plugin-sass I get a runtime error:

import scss from 'rollup-plugin-scss'
import sass from 'rollup-plugin-sass'
...
plugins: [
  scss({
    include: ['src/**/*.scss'],
    output: 'public/bundle-dark.css',
    // insert: true
    data: '@import "src/_theme-dark-variables";',
    compress: true,
    sass,
  }),
]

Error:

Error:
sass.renderSync is not a function

[dmstern]

In my project, I could fix it by using this plugin instead: https://www.npmjs.com/package/rollup-plugin-sass

and then adapting the rollup config:

sass({ api: 'modern' });

[thgh]

The plugins are not supposed to be combined:

-import sass from 'rollup-plugin-sass'
+import sass from 'sass'

[tylercollier]

I get the same error. I have rollup-plugin-scss and sass installed. I do not have rollup-plugin-sass installed.

➜  ~/repos/myproject git:(master) ✗ npm ls rollup-plugin-sass
myproject@ /Volumes/Sensi/repos/myproject
└── (empty)

➜  ~/repos/myproject git:(master) ✗ npm ls rollup-plugin-scss
myproject@ /Volumes/Sensi/repos/myproject
└── [email protected]

➜  ~/repos/myproject git:(master) ✗ npm ls sass
myproject@ /Volumes/Sensi/repos/myproject
└── [email protected]