如何在Rollup中构建含Tailwind SCSS的Vue3单文件组件库？

你的报错核心是Rollup默认仅处理JavaScript文件，无法解析Vue单文件中的模板、SCSS样式以及Tailwind的@apply语法，必须补充对应的插件链来处理这些非JS内容。以下是具体解决步骤：

1. 安装必要依赖 #

执行命令安装Rollup处理Vue、SCSS和PostCSS的插件：

npm install --save-dev rollup-plugin-vue@next rollup-plugin-scss postcss autoprefixer sass

• rollup-plugin-vue@next：负责解析Vue3单文件组件（SFC）
• rollup-plugin-scss：处理SCSS样式文件
• postcss + autoprefixer：配合Tailwind处理CSS前缀和自定义语法
• sass：编译SCSS为CSS

2. 更新Rollup配置文件 #

修改rollup.config.js，添加插件并配置PostCSS集成Tailwind：

import vue from 'rollup-plugin-vue';
import scss from 'rollup-plugin-scss';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
  input: 'src/index.js', // 你的组件库入口文件
  output: {
    file: 'dist/my-component-lib.esm.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    // 处理Vue单文件组件，同时配置PostCSS处理Tailwind
    vue({
      style: {
        postcssPlugins: [
          tailwindcss('./tailwind.config.js'), // 指向你的Tailwind配置文件
          autoprefixer()
        ]
      }
    }),
    // 提取并编译SCSS为独立CSS文件
    scss({
      output: 'dist/my-component-lib.css',
      processor: () => require('postcss')([tailwindcss(), autoprefixer()])
    })
  ],
  // 排除Vue等外部依赖（如果你的组件库需要用户自行安装Vue）
  external: ['vue']
};

3. 确保Tailwind配置正确 #

项目根目录创建或完善tailwind.config.js，指定需要扫描的组件文件路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{vue,js,ts}', // 扫描src下所有Vue/JS/TS文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 检查Vue组件的样式写法 #

确保组件的<style>标签声明了SCSS语言，并正确使用@apply：

<template>
  <div class="test-component">Hello Component</div>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss">
.test-component {
  @apply w-full p-4 bg-gray-100 rounded-lg;
}
</style>

5. 重新执行打包 #

运行npm run build，此时Rollup会通过插件链依次解析Vue组件、编译SCSS、处理Tailwind语法，最终生成正确的组件库文件。

内容的提问来源于stack exchange，提问作者DengSihan