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

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?

Echolocation

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

Wickliffe

Thanks, I tried it but still not work. – Echolocation

@Echolocation can you show a demo of your work on sandbox? – Wickliffe

I finally solved this problem by rollup-plugin-postcss and sass. And this part in my rollup.config.js is plugins: [postcss({ extract: true, process: processScss})]. I think my problem was the place which is the configuration to generate .d.ts also need this plugin. – Echolocation

what is processScss ? – Roadrunner