vue.js - Rollup、Vue 和 Buble，scss 文件中的意外标记

Question

我正在按照 Vue 官方页面中提供的示例，使用 Vue 和 Buble 尝试使用汇总编译 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
    ],
};

这是我的 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;

我已尝试从插件中删除 buble，但最终出现错误“意外的 token (请注意，您需要插件才能导入非 JavaScript 的文件)”

Answer 1

试试这个:

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

在 rollup.config.js 中:

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

plugins: { ..., scss() }

我真的不知道这里发生了什么。以上对我有用(Vue.js 3(测试版)和 rollup-plugin-vue 6.0.0-beta.6。