CSS in *.vue files should be separated from any other css files.

[yaquawa]

Version

6.0.0

Steps to reproduce

Trying ver. 6.0.0-beta.8 with rollup-plugin-scss.

// rollup.config.js

import sass from 'sass';
import vuePlugin from 'rollup-plugin-vue';
import scssPlugin from 'rollup-plugin-scss';
import tsPlugin from 'rollup-plugin-typescript2';
import resolveNodePlugin from '@rollup/plugin-node-resolve';

export default {
    input: 'src/index.ts',
    output: 'dist/index.js',
    plugins: [
      tsPlugin(),
      scssPlugin({
        sass,
        output: 'dist/index.css'
      }),
      vuePlugin(),
      resolveNodePlugin()
    ],
    external: ['vue']
  }

// src/App.vue

... templates & scripts

<style>
div { color:red; }
</style>

// src/style.scss

@use("./foo")
@use("./bar")

// src/index.ts

import "./style.scss";
import App from "./App.vue";

Will throw an error:

@use rules must be written before any other rules.

What is expected?

The style in *.vue should be separated from any other scss files.
If merged them together which emit a file like this:

div { color:red; }
@use("./foo")
@use("./bar")

then the above error occurs.

What is actually happening?

...

[znck]

You have to add an exclude rule in scss plugin.

The following snippet should work:

scssPlugin({ exclude: [/\.vue/] } )