title: Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
body: <p>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</p>
  <pre><code>import { terser } from &quot;rollup-plugin-terser&quot;;
  
  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()
    ]
  };
  </code></pre>
  <p>This is the .vue file I'm using.</p>
  <pre><code>&lt;template&gt;
  〜abridgement〜
  &lt;/template&gt;
  &lt;script&gt;
  〜abridgement〜
  &lt;/script&gt;
  &lt;style lang=&quot;scss&quot; scoped&gt;
  @import &quot;./src/style/foundation/xxx&quot;;
  @import &quot;./src/style/foundation/xxx&quot;;
  </code></pre>