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
└── rollup-plugin-scss@4.0.1

➜  ~/repos/myproject git:(master) ✗ npm ls sass
myproject@ /Volumes/Sensi/repos/myproject
└── sass@1.83.0

[mohammadkhakshoor]

I have the same issue and i cannot turn off logging the deprication warnings in the building phase

`Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
6 │ @import 'components/countdown-timer/base';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources/assets/css/client-common-components.scss 6:9 root stylesheet`
and i used any possible options (some of them are not included)

{ input: 'resources/assets/css/client-common-components.scss', output: [ { file: 'public/css/client-common-components.css', format: 'iife', name: 'client-common-components', extend: true, }, ], plugins: [ postcss({ extract: true, }), scss({ api: 'modern', silenceDeprecations: [ 'call-string', 'elseif', 'import', 'moz-document', ], quietDeps: true, verbose: false, }), ], },

[derrickb]

Using this in the plugin's options will turn off the warning:

scss({
  silenceDeprecations: ["legacy-js-api"]
})