Rollup, Vue and Buble, unexpected token in scss file

Question

I am trying to compile SFC with rollup, using Vue and Buble, following the example suplied in the Vue official page. But I keep getting this error:

src/wrapper.j         


        

Answer 1

Try this:

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

In rollup.config.js:

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

plugins: { ..., scss() }

I don't really know what's going on, here. The above worked for me (Vue.js 3 (beta) and rollup-plugin-vue 6.0.0-beta.6.

Answer 2

// 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;

Hope this will generate esm bundle for the entry