sass - 当我在汇总中使用 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 '@'(请注意，您需要插件才能导入非 JavaScript 文件)。由于 rollup 建议安装所需的插件，我安装了 rollup-plugin-import-css现在一切正常。

在你的文件是 sass 的情况下，你可以尝试 rollup-plugin-sass