Issue with rollup-plugin-vue and scss

Hello! First time posting here, I’ll try to be as precise as possible.

rollup: 2.17.0
rollup-plugin-vue: 5.19.0
vue: 2.6.11

I am trying to move my Webpack config to Rollup for a library, a design system, to be able to have an ESM output.

So far it works great, but I have issue with the styles and those issues are random. Each time I build, the issue changes. I feel that this is because rollup-plugin-vue process the style asynchronously or at leats, in a different way than webpack’s vue-loader.

Here are some screenshots and an example of an issue.

We have a component AcDateTimeField which have a child AcClearButton. They both have scoped scss. In AcDateTimeField we override some styles from AcClearButton.

The expected behaviour is that the styles from AcDateTimeField have priority over AcClearButton, this is basic CSS cascading.

The issue is that, sometimes, somewhere around 1 build out of 10 or 15, the styles from the parent component does not override the style of the children. Not only for those components, but it happens for other components into our design system, it’s random. We never ever had this issue with Webpack.

Expected (Webpack)

Issue (Rollup)

Rollup Vue config

const scssTildeImporter = (url, prev, done) => {
  if (url[0] === '~') {
    url = path.resolve(path.resolve(PROJECT_ROOT_DIR, 'node_modules'), url.substr(1));

  return { file: url };

For the scss, in AcDateTimeField, we use the private component AcDateTimeInput which have the scoped style.

<style src="./ac-date-time-input.scss" lang="scss" scoped></style>

In that scss file, we have a class to override the style of the child AcClearButton

.acds-date-time-input__clear {
  margin-right: $space-md;
  position: relative;

And in AcClearButton we also have the style scoped

<style src="./ac-clear-button.scss" lang="scss" scoped></style>

And into that scss file we have

.acds-clear-button {
  @include button-reset;
  @include default-focus;

  bottom: 0;
  color: $color-smalt-blue;
  font-size: $font-size-md;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;

  &:hover {
    color: $color-pure-black;

Still looking for help :frowning:

1 Like