Needs an extra plugin for `.css/.scss/.sass` (with Vue.js 3 beta)

[akauppi]

Version

6.0.0-beta.6

Reproduction link

https://stackoverflow.com/questions/62384191/rollup-vue-and-buble-unexpected-token-in-scss-file/62625441#62625441

Steps to reproduce

6.0.0-beta.6. (was unable to fill that into the "version" field)

As @P-Seebauer mentions here,

the css needs an extra rollup css plugin, this is awkward because the css-only plugin seems like the wrong choice at first (“i have scss”),

That ticket is closed, but this anomaly remains. Thus the creation of this ticket, to track it.

Setup

Vue.js 3 (beta), e.g. 3.0.0-beta.15
Rollup 2.16.1
rollup-plugin-vue 6.0.0-beta.6

Expectation:

It is easy to build a Vue.js 3 (beta) project, using Rollup.

Actual:

One gets the following error message, and it is not clear a) what causes it, b) how to get rid of it:

$ npx rollup -c
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang.css (2:0)

First aid

The way around this was suggested by @P-Seebauer's comment (above). I added rollup-plugin-scss to the mix, and it seems to please Rollup. The build proceeds. It handles both .scss and .css files.

However, since Vue.js is expected to handle these, asking application developers to add such a plugin seems unnecessary.

Real fix

I cannot say, whether this falls to Vue.js 3 beta or the rollup-plugin-vue (also beta) domain. I do hope it gets ironed out, before the both are out of their betas.

What is expected?

Things "just work", without needing to add rollup-plugin-scss, to handle Vue styles.

What is actually happening?

One needs to add that plugin.

---

I can be of assistance in testing.

[akauppi]

To reproduce:

$ git clone git@github.com:akauppi/GroundLevel-es6-firebase-web.git
$ cd GroundLevel*

• Check the README for setting up the project

$ npm install
$ npm run build

That should pass. Now edit rollup.config.prod.js and switch off:

const scssHackNeeded = true;   // <-- make it false

Repeat.

$ npm run build
...
src/main.js → public/dist...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang.css (2:0)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

[XiongAmao]

Seems like vite can handle scss/sass correctly.

[kleinfreund]

Is there a workaround that allows one to process a Vue SFC just like before (i.e. prior to version 6 releases)? In my rollup.config.js, I have two build configurations:

• using vuePlugin() without any options to keep the SFC’s style block contents as part of the generated JS bundle
• using vuePlugin({ css: false }) and a custom rollup plugin to discard the style block contents entirely

Adding another plugin processor like the one from rollup-plugin-scss after the vuePlugin() step for scenario 1 doesn’t produce a desirable result as it generates a separate CSS file.

Also, the css option seems to be completely missing from rollup-plugin-vue now. Was it deprecated or replaced?

[NicolasRichel]

Hi @kleinfreund .

We recently face the same issue trying to make our Vue 2 component library "Vue 3 compliant".

Your problem looks very similar to this one, so I will reproduce my answer here as this issue is used as a tracker.

Using rollup-plugin-vue v6.0.0 we were able to inject CSS in Javascript by adding the rollup-plugin-postcss plugin with the following config:

...
import vue from 'rollup-plugin-vue'; // v6.0.0
import postcss from 'rollup-plugin-postcss'; // v4.0.0

export default {
  input: ...,
  output: ...,
  plugin: [
    ...
    vue({
      preprocessStyles: true
    }),
    postcss()
  ]
}

Notes: the rollup-plugin-postcss needs postcss as a peer dependecy.

Hope this helps. :-)

[jdfwarrior]

I'm running into the same issue. I'm trying to compile a component or plugin into a standalone piece that I can import without needing to go through a bundler. I'm attempting to make a way to load extensions into an electron app built with vue 3. I'm using an absolutely bare minimal component. It's just a template with a single paragraph tag and a style tag that sets the background of that paragraph tag. the vue plugin seems to (according to the docs) support parsing the style tag but when I try it, I get:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

and it points at the opening curly in the css.

Using the postcss plugin as mentioned above does seem to make it work though.

[mnlipp]

I've been sorting out the [!] Error: Unexpected token problem for a day now. I think the root cause for this issue is described in #410 (despite its title still valid for 6.0.0).

[DaanDL]

@NicolasRichel Unfortunately, this doesn't seem to work for scoped scss style blocks in SFC's. It requires rollup-plugin-scss, but that plugin generates a .css and all scoping gets lost..

[SvenBudak]

I struggle with the same problem. I tryed also the solution from NicolasRichel but no way. Its important to keep the css inside the component scoped. And an aditional main css file is needed which contains scss variables and functions they have to be used inside the vue components. But this file should get loaded only one time. i have really no idea how to start here.

[DaanDL]

@SvenBudak
I gave up, and ditched rollup for Vite 2 (which uses rollup with a specific set of plugins in the background). It all works now as intended without much config.

[mnlipp]

@DaanDL
But Vite 2 is so much more (and complex). I never figured out how to get it working. Do you have a simple configuration that only does what rollup-plugin-vue is supposed to do (in my case: create a browser-module with the Vue 3 components, triggered by some simple node.js script invocation).

[SvenBudak]

Dear god... Sience 2 weeks i try to generate a library for vue that is just working 😂 I have experiance with this in angular. but i cant find any helpfull for vue. Its a mess...