Почему не проставляется атрибут data-v у стилей vue компонента при билде роллапом?

Question

[Александр]

Пытаюсь сбилдить юай либу при помощи роллапа. У меня есть вью компонент, тег style которого выглядит так:

<style scoped lang="scss">
.sample-component-container {
    background-color: black;
    color: purple;
}

@import './styles.scss'; // внутри следующий код: .test-style {background: aquamarine;}
</style>

Конфиг роллапа выглядит так:

import vue from '@vitejs/plugin-vue'; // версия 4.1.0
import styles from 'rollup-plugin-styles'; // версия 4.0.0
import resolve from '@rollup/plugin-node-resolve'; // версия 15.0.1

export default {
  input: "src/index.client.ts", // здесь просто экспортируется Vue компонент
  output: {
    dir: `./build-lib`,
    assetFileNames: '[name].[ext]',
  },
  plugins: [
    resolve(),
    vue(),
    styles({
      mode: ['extract', 'client.css'],
    }),
  ]
};

Билд компанда: rollup -c
Сбилженный css файл выглядит так:

.sample-component-container[data-v-abc98fff] {
  background-color: black;
  color: purple; 
}

.test-style {
  background: aquamarine; 
}

Почему у .test-style не проставляется атрибут data-v-abc98fff, хотя стиль должен быть в том же скопе, что и .sample-component-container

Comments

[modelair]

мне вот тоже интересно. напиши, если решение найдешь. спасибо :)

[Александр]

modelair, ответил решением на этот вопрос)

Answer 1

[Александр]

@vitejs/plugin-vue использует под копотом vue/compiler-sfc, посмотрев исходный код compiler-sfc получилось такое решение:

vue({
  style: {
    preprocessOptions: {
      additionalData: globalScssData // @import 'some-path/mixins.scss'; для глобального импорта
    },
    preprocessLang: 'scss' // используемый препроцессор: 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
  }
}),

Понятного объяснения в доке по preprocessLang я не нашел, удалось понять смысл только после просмотра исходного кода. После решения проблемы с data-v атрибутом мне нужны были глобально некоторые scss миксины, про additionalData тоже никакой информации в доке, кстати, нет (по крайней мере я не нашел)
Мораль: лучше сначала залезть в исходный код, а потом ресерчить, сэкономил бы себе кучу времени)