Почему css написанный в компонентах попадает в после билда?

Question

[lavezzi1]

Здравствуйте. Собрал библиотеку компонентов vue с помощью rollup, импортирую в приложение:

import { VButton } from '@compnany/ui';

Сама кнопка выглядит как то так, упростил для примерa:

<template>
  <button class="v-button">
      <slot/>
  </button>
</template>

<script>
export default {}
</script>

<style lang="postcss">
.v-button {
  background-color: red;
}
.v-button:hover {
  background-color: blue;
}
</style>

Все прекрасно работает, но! Почему то код делаю билд проекта, css компонента попадает в <style> тег страницы, а не в css файл. Проект развернут на vue-cli последней версии.

В идеале, хотелось бы чтобы css конкретного компонента попадал в бандл страницы (использую lazy load в router).

Comments

[Дмитрий]

Стили по умолчанию в отдельный css выделяются. Смотрите в доках настройки, там можно это отключить

[lavezzi1]

Дмитрий, Я исправил неточность при написании. У меня проблема наоборот в том, что css написанный в этих компонентах (в пакете которые) попадает на страницу в теге стиль, а не попадает в бандл css всего приложения.

[Дмитрий Беляев]

lavezzi1, конфиг rollup покажите, скорее всего плагин извлечения стилей так настроен

[lavezzi1]

Дмитрий Беляев,

import fs from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import vue from 'rollup-plugin-vue';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import tailwindcss from 'tailwindcss';
import postcss from 'rollup-plugin-postcss';

const babelConfig = babel({
  exclude: /node_modules/,
  runtimeHelpers: true,
  babelrc: false,
  presets: [
    [
      '@babel/preset-env', {
        modules: false
      }
    ]
  ],
});

const vueConfig = vue({
  css: false,
  style: {
    postcssPlugins: [tailwindcss()]
  },
  // template: {
  //   isProduction: true
  // }
});

const baseFolder = './src/';

const components = fs.readdirSync(baseFolder)
  .filter(f => fs.statSync(path.join(baseFolder, f)).isDirectory());

const entries = {
  index: './src/index.js',
  ...components.reduce((obj, name) => {
    obj[name] = (baseFolder + name + '/index.js')
    return obj
  }, {})
};

export default {
  input: entries,
  output: [
    {
      dir: 'lib/esm/',
      format: 'esm',
    },
  ],
  external: ['vue'],
  plugins: [
    resolve({
      extensions: ['.vue', '.js', '.css']
    }),
    postcss({
      extract: true,
      extract: path.resolve('lib/esm/lib.css'),
      plugins: [tailwindcss()]
    }),
    babelConfig,
    vueConfig,
    commonjs(),
  ],
};