rollup: how to rollup tailwind scss in Vue sfc?

Question

I'm trying to build a component library using Vue.js3, Rollup.js, and Tailwind CSS.

---

configs

package.json

{
    "private": true,
    "main": "dist/plugin.js",
    "module": "dist/plugin.mjs",
    "files": [
        "dist/*"
    ],
    "scripts": {
        "dev": "vite",
        "build": "rollup -c"
    },
    "peerDependencies": {
        "vue": "^3.2.37"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^3.0.1",
        "@vue/compiler-sfc": "^3.2.37",
        "autoprefixer": "^10.4.8",
        "postcss": "^8.4.16",
        "rollup": "^2.77.2",
        "rollup-plugin-vue": "^6.0.0",
        "sass": "^1.54.4",
        "tailwindcss": "^3.1.8",
        "vite": "^3.0.4"
    }
}

rollup.config.js

import vue from 'rollup-plugin-vue';
import packageJSON from './package.json';

export default [
    {
        input: 'src/index.js',
        output: [
            {
                format: 'esm',
                file: packageJSON.module,
                sourcemap: true,
            },
            {
                format: 'cjs',
                file: packageJSON.main,
                sourcemap: true,
            }
        ],
        plugins: [
            vue({
                css: true
            }),
        ]
    }
];

---

test component

Then I got a component styled via scss inside of vue sfc powered by tailwindcss:

src/components/test.vue

<template>
    <p
        class="test">
        test component
    </p>
</template>

<style lang="scss">
.test {
    @apply text-white bg-red-500;
}
</style>

src/components/index.js

import test from './test.vue';
export default {
    test
}

src/index.js

import components from './components/index.js';
const plugin = {
    install(app, options) {
        app.component('test', components.test);
    }
}
export default plugin;

---

error

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/components/test.vue?vue&type=style&index=0&id=e43c18bc&lang.scss (2:0) 1: 2: .test { ^ 3: @apply text-white bg-red-500; 4: }

---

online reproduction

run npm run build in online reproduction

---

So, how can I use scss with tailwindcss in rollup to build a package?

I've googled this but nothing helps. Thanks a lot for your patience！

Answer 1

I have found a library a long time ago that did it with TypeScript and I forked it. But I'm not sure how it works. Here's the code:

src/index.ts

import plugin, * as components from 'src/entry.esm';

type NamedExports = Exclude<typeof components, 'default'>;
type ExtendedPlugin = typeof plugin & NamedExports;
Object.entries(components).forEach(([componentName, component]) => {
  if (componentName !== 'default') {
    const key = componentName as Exclude<keyof NamedExports, 'default'>;
    const val = component as Exclude<ExtendedPlugin, typeof plugin>;
    (plugin as ExtendedPlugin)[key] = val;
  }
});

export default plugin;

src/entry.esm.ts

import { App, Plugin } from 'vue';

// Import vue components
import * as components from 'src/components/index';

// install function executed by Vue.use()
const install: Exclude<Plugin['install'], undefined> = function installLibrary(app: App) {
  Object.entries(components).forEach(([componentName, component]) => {
    app.component(componentName, component);
  });
};

// Create module definition for Vue.use()
export default install;

// To allow individual component use, export components
// each can be registered via Vue.component()
export * from 'src/components/index';

src/components/index.ts

import '../tailwind.css';

export { default as ComponentOne } from './ComponentOne.vue';
export { default as ComponentTwo } from './ComponentTwo.vue';
export { default as ComponentThree } from './ComponentThree.vue';

There is no reference to Tailwind CSS in the rollup.config.js file.