Unexpected character '#' (Note that you need plugins to import files that are not JavaScript) when I use scss in rollup - sass

Question

When I use Scss in rollup, and When I build project then there is a error:
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: #import 'variables';
I tried some methods but not success, such as rollup-plugin-postcss or rollup-plugin-scss. And I changed sass to node-sass, but another problem appear because I used a syntax like $spacer / 2.
This is my package.json
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^22.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"#rollup/plugin-replace": "^4.0.0",
"#types/classnames": "^2.3.1",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-transition-group": "^4.4.4",
"cross-env": "^7.0.3",
"node-sass": "6.0.1",
"postcss": "^8.4.14",
"react": "^17.0.2",
"react-dom": "17.0.2",
"rollup": "^2.76.0",
"rollup-plugin-css-porter": "^1.0.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-postcss-retain-sass-data": "^2.0.3",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.32.1",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
This is index.scss
#import 'variables';
// layout
#import 'normalize';
// mixin
#import './mixins';
// animation
#import './animation';
// alert
#import '../Alert/style';
Is there some methods to solve this problem?

Answer 1

I was having the same issue with importing css file, the error was [!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript). as rollup is suggesting to install the required plugin, I installed rollup-plugin-import-css and now it's working fine.
In your case which your file is sass you can try rollup-plugin-sass