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

I'm using a single template with vue and scss in rollupjs, but I can't use @import. .. I get an error. Why is this. Put the config file on it

import { terser } from "rollup-plugin-terser";

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

// wild card
import multi from '@rollup/plugin-multi-entry';
import VuePlugin from 'rollup-plugin-vue'

import babel from '@rollup/plugin-babel';



export default {
  input: './src/javascripts/**/*.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    VuePlugin({
      preprocessOptions: {
        scss: {
          includePaths: ['./src/style', 'node_modules'],
        },
      }
    }),
    terser(),
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
    multi()
  ]
};

This is the .vue file I'm using.

<template>
〜abridgement〜
</template>
<script>
〜abridgement〜
</script>
<style lang="scss" scoped>
@import "./src/style/foundation/xxx";
@import "./src/style/foundation/xxx";