Vue.js 汇总、Vue和Buble，scss文件中出现意外令牌

我正试图使用Vue和Buble，按照Vue官方页面提供的示例，使用rollup编译SFC。但我一直在犯这样的错误：

src/wrapper.js → dist/chat.min.js...
[!] (plugin buble) SyntaxError: Unexpected token (2:0)
src\components\Chat.vue?vue&type=style&index=0&lang.scss (2:0)
1 :
2 : .chat, .chat>*, .chat * {

这是我的rollup.config.js：

import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
export default {
    input: 'src/wrapper.js', // Path relative to package.json
    output: {
        name: 'Chat',
        exports: 'named',
    },
    plugins: [
        commonjs(),
        vue({
            css: true, // Dynamically inject css as a <style> tag
            compileTemplate: true, // Explicitly convert template to render function
        }),
        buble(), // Transpile to ES5
    ],
};

从'@rollup/plugin commonjs'导入commonjs；//将CommonJS模块转换为ES6
从“汇总插件vue”导入vue；//处理.vue SFC文件
从“@rollup/plugin buble”导入buble；//具有合理浏览器支持的透明/多边形填充
导出默认值{
输入：'src/wrapper.js'，//相对于package.json的路径
输出：{
姓名：'聊天'，
导出：'命名'，
},
插件：[
commonjs（），
vue({
css:true，//将css作为标记动态注入
compileTemplate:true，//显式地将模板转换为呈现函数
}),
buble（），//传输到ES5
],
};

这是我的wrapper.js：

  // Import vue component
  import component from "./components/Chat.vue";

  // Declare install function executed by Vue.use()
  export function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component("chat", component);
  }

  // Create module definition for Vue.use()
  const plugin = {
    install
  };

  // Auto-install when vue is found (eg. in browser via <script> tag)
  let GlobalVue = null;
  if (typeof window !== "undefined") {
    GlobalVue = window.Vue;
  } else if (typeof global !== "undefined") {
    GlobalVue = global.Vue;
  }
  if (GlobalVue) {
    GlobalVue.use(plugin);
  }

  // To allow use as module (npm/webpack/etc.) export component
  export default component;

//导入vue组件
从“/components/Chat.vue”导入组件；
//声明Vue.use（）执行的安装函数
导出功能安装（Vue）{
如果（安装。安装）返回；
install.installed=true；
Vue.组件（“聊天室”，组件）；
}
//为Vue.use（）创建模块定义
常量插件={
安装
};
//找到vue时自动安装（例如，通过标签在浏览器中）
设GlobalVue=null；
如果（窗口类型！=“未定义”）{
GlobalVue=window.Vue；
}else if（全局类型！=“未定义”）{
GlobalVue=global.Vue；
}
国际单项体育联合会（环球）{
GlobalVue.use（插件）；
}
//允许用作模块（npm/webpack/等）导出组件
导出默认组件；

我曾尝试从插件中删除buble，但最后出现了一个错误：“意外令牌（请注意，您需要插件来导入非JavaScript的文件）”

尝试以下操作：

$ npm install --save-dev rollup-plugin-scss

在

rollup.config.js

中：

import scss from 'rollup-plugin-scss';      // handles '.css' and '.scss'

plugins: { ..., scss() }

我真的不知道发生了什么，这里。上述方法对我很有效（Vue.js3（beta版）和

rollup插件Vue

6.0.0-beta.6）

// rollup.config.js
  import fs from 'fs';
  import path from 'path';
  import VuePlugin from 'rollup-plugin-vue';
  import alias from '@rollup/plugin-alias';
  import commonjs from '@rollup/plugin-commonjs';
  import replace from '@rollup/plugin-replace';
  import babel from 'rollup-plugin-babel';
  import minimist from 'minimist';
  import css from 'rollup-plugin-css-only';

  // Get browserslist config and remove ie from es build targets
  const esbrowserslist = fs.readFileSync('./.browserslistrc')
    .toString()
    .split('\n')
    .filter((entry) => entry && entry.substring(0, 2) !== 'ie');

  const argv = minimist(process.argv.slice(2));

  const projectRoot = path.resolve(__dirname, '..');

  const baseConfig = {
    input: 'src/entry.js',
    plugins: {
      preVue: [
        alias({
          resolve: ['.js', '.vue', '.css'],
          'vue$': require.resolve('vue/dist/vue.esm-bundler.js'),
          entries: {
            '@': path.resolve(projectRoot, 'src')
          }
        }),
      ],
      replace: {
        'process.env.NODE_ENV': JSON.stringify('production'),
        'process.env.ES_BUILD': JSON.stringify('false'),
      },
      vue: {
        css: false,
        template: {
          isProduction: true,
        },
      },
      babel: {
        exclude: 'node_modules/**',
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      }
    },
  };

  const external = [
    'vue',
  ];


  // Customize configs for individual targets
  const buildFormats = [];
  if (!argv.format || argv.format === 'es') {
    const esConfig = {
      ...baseConfig,
      external,
      output: {
        file: 'dist/vue3lib.esm.js',
        format: 'esm',
        exports: 'named',
      },
      plugins: [
        replace({
          ...baseConfig.plugins.replace,
          'process.env.ES_BUILD': JSON.stringify('true'),
        }),
        ...baseConfig.plugins.preVue,
        VuePlugin(baseConfig.plugins.vue),
        babel({
          ...baseConfig.plugins.babel,
          presets: [
            [
              '@babel/preset-env',
              {
                targets: esbrowserslist,
              },
            ],
          ],
        }),
        commonjs(),
        css()
      ],
    };
    buildFormats.push(esConfig);
  }
  // Export config
  export default buildFormats;

希望这将为条目生成esm包