当我在汇总中使用scss时，意外的字符'@‘(注意，您需要插件来导入不是JavaScript的文件)

Question

当我在汇总中使用Scss时，当我构建项目时，会出现一个错误：

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: @import 'variables';

我尝试了一些方法，但没有成功，比如rollup-plugin-postcss或rollup-plugin-scss。我将sass改为node-sass，但出现了另一个问题，因为我使用了类似于$spacer / 2的语法。

这是我的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"
  }

我是index.scss

@import 'variables';

// layout
@import 'normalize';

// mixin
@import './mixins';

// animation
@import './animation';

// alert
@import '../Alert/style';

有什么办法解决这个问题吗？

Answer 1

我在导入css文件时遇到了同样的问题，错误是[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)。正如rollup建议安装所需的插件一样，我安装了汇总-插件-导入-css，现在它运行良好。

在您的文件是sass的情况下，您可以尝试总结性插件