通过vue sfc汇总使用顺风CSS

我正在尝试使用Vue.js 3、Rollup.js和Tailwind CSS构建一个组件库。当我将它发布到我们的NPM注册中心并安装到另一个项目上时，除了Tailwind之外，一切都很好。我曾尝试添加Tailwind rollup插件，但一直无法使其正常工作。如果有人熟悉使用顺风与罗拉，我将感谢帮助

下面是rollup.config.js文件

import fs from 'fs';
import path from 'path';
import vue from 'rollup-plugin-vue';
import alias from '@rollup/plugin-alias';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import tailwind from 'rollup-plugin-tailwindcss';
import PostCSS from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';

// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs.readFileSync('./.browserslistrc')
  .toString()
  .split('\n')
  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');

// Extract babel preset-env config, to combine with esbrowserslist
const babelPresetEnvConfig = require('../babel.config')
  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];

const argv = minimist(process.argv.slice(2));

const projectRoot = path.resolve(__dirname, '..');

const baseConfig = {
  input: 'src/entry.js',
  plugins: {
    preVue: [
      alias({
        entries: [
          {
            find: '@',
            replacement: `${path.resolve(projectRoot, 'src')}`,
          },
        ],
      }),
    ],
    replace: {
      'process.env.NODE_ENV': JSON.stringify('production'),
    },
    vue: {
    },
    postVue: [
      resolve({
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      }),
      tailwind({
        input: '../src/index.css', // required
        purge: true,
      }),
      // Process only `<style module>` blocks.
      PostCSS({
        modules: {
          generateScopedName: '[local]___[hash:base64:5]',
        },
        include: /&module=.*\.css$/,
      }),
      // Process all `<style>` blocks except `<style module>`.
      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
      commonjs(),
    ],
    babel: {
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      babelHelpers: 'bundled',
    },
  },
};

// ESM/UMD/IIFE shared settings: externals
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
const external = [
  // list external dependencies, exactly the way it is written in the import statement.
  // eg. 'jquery'
  'vue',
];

// UMD/IIFE shared settings: output.globals
// Refer to https://rollupjs.org/guide/en#output-globals for details
const globals = {
  // Provide global variable names to replace your external imports
  // eg. jquery: '$'
  vue: 'Vue',
};

// Customize configs for individual targets
const buildFormats = [];
if (!argv.format || argv.format === 'es') {
  const esConfig = {
    ...baseConfig,
    input: 'src/entry.esm.js',
    external,
    output: {
      file: 'dist/comp-lib_v2.esm.js',
      format: 'esm',
      exports: 'named',
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
      babel({
        ...baseConfig.plugins.babel,
        presets: [
          [
            '@babel/preset-env',
            {
              ...babelPresetEnvConfig,
              targets: esbrowserslist,
            },
          ],
        ],
      }),
    ],
  };
  buildFormats.push(esConfig);
}

if (!argv.format || argv.format === 'cjs') {
  const umdConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comp-lib_v2.ssr.js',
      format: 'cjs',
      name: 'CompLib_v2',
      exports: 'auto',
      globals,
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
      babel(baseConfig.plugins.babel),
    ],
  };
  buildFormats.push(umdConfig);
}

if (!argv.format || argv.format === 'iife') {
  const unpkgConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comp-lib_v2.min.js',
      format: 'iife',
      name: 'CompLib_v2',
      exports: 'auto',
      globals,
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
      babel(baseConfig.plugins.babel),
      terser({
        output: {
          ecma: 5,
        },
      }),
    ],
  };
  buildFormats.push(unpkgConfig);
}

// Export config
export default buildFormats;

从“fs”导入fs；
从“路径”导入路径；
从“汇总插件vue”导入vue；
从“@rollup/plugin alias”导入别名；
从“@rollup/plugin commonjs”导入commonjs；
从“@rollup/plugin node resolve”导入解析；
从“@rollup/plugin replace”导入replace；
从“@rollup/plugin babel”导入巴别塔；
从“汇总插件tailwindcss”导入tailwind；
从“汇总插件PostCs”导入PostCs；
从'rollup plugin terser'导入{terser}；
从“minimist”导入minimist；
//获取browserslist配置并从es构建目标中删除ie
const esbrowserslist=fs.readFileSync（'./.BrowsersList'）
.toString（）
.split（“\n”）
.filter（（entry）=>entry和&entry.substring（0，2）！=='ie'）；
//提取babel预设环境配置，与EsbrowseSList结合
const babelPresetEnvConfig=require（'../babel.config'）
.presets.filter（（条目）=>条目[0]=='@babel/preset env'）[0][1]；
常量argv=最小值（process.argv.slice（2））；
const projectRoot=path.resolve（_dirname，…）；
常量baseConfig={
输入：“src/entry.js”，
插件：{
普雷维：[
别名({
参赛作品：[
{
查找：“@”，
替换：`${path.resolve（projectRoot，'src'）}`，
},
],
}),
],
替换：{
'process.env.NODE_env'：JSON.stringify（'production'），
},
vue：{
},
postVue：[
决心({
扩展：['.js'、'.jsx'、'.ts'、'.tsx'、'.vue']，
}),
顺风({
输入：'../src/index.css'，//必需
是的，
}),
//只处理``块。
邮政编码({
模块：{
generateScopedName:“[local]u uu[hash:base64:5]”，
},
包括：/&module=.*\.css$/，
}),
//处理除``以外的所有``块。
邮政编码（{包括：/（？）？