bootstrap-5 - 使用 rollup.js 编译带有 @import 语句的 Bootstrap 5 SCSS 文件

Question

使用Bootstrap建议的最佳实践，我们有一个主 scss 文件，该文件使用@import语句来包含我们正在使用的 Bootstrap SCSS 文件的各个部分。

例如

// Variables
@import "./src/scss/1-variables/app";
@import "./src/scss/1-variables/fonts";

// Bootstrap
@import "bootstrap/scss/bootstrap";

但是，当我运行汇总时，我不断收到此错误：

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

而且我似乎找不到解决方案。我正在使用建议的 rollup-plugin-scss，我显然缺少一些基本的东西。

这是我的 rollup.config.js 文件：

import scss from 'rollup-plugin-scss'
import path from 'path';
import postcss from 'postcss'
import autoprefixer from 'autoprefixer'


export default [
  {
    input: 'public/theme/vendor.js',
    output: {
      file: 'public/js/vendor-bundle.js',
      format: 'iife',
      globals: {
        jquery: '$',
        bootstrap: 'bootstrap',
        feather: 'feather',
        moment: 'moment',
        notyf: 'notyf',
      }
    },
    plugins: [
      scss({
        processor: () => postcss([autoprefixer()]),
        includePaths: [
          path.join(__dirname, '../../node_modules/'),
          'node_modules/'
        ], 
        outputStyle: 'compressed',
        sourceMap: true,
        extract: true,
        extensions: ['.sass','.css'],
          // Prefix global scss. Useful for variables and mixins.
        prefix: `@import "./public/theme/public.scss";`,
      })
    ]
  }
];

import './public/theme/public.scss'