rollup-plugin-css-only 参数

`rollup-plugin-css-only` 是一个用于提取并输出 CSS 样式文件的插件。当您使用 Rollup 构建项目时,通常将 CSS 代码打包到 JavaScript 文件中。但在某些情况下,例如在使用服务端渲染时,您可能需要将 CSS 样式文件分离出来,这时就可以使用 `rollup-plugin-css-only` 插件了。以下是 `rollup-plugin-css-only` 插件的可用参数:

#### `output`

- 类型: `string`

- 默认值: `undefined`

用于指定要输出的 CSS 文件的路径。例如,如果您要将 CSS 样式输出到 `public` 文件夹中的 `styles.css` 文件中,则可以将 `output` 设置为 `'public/styles.css'`。

#### `moduleIds`

- 类型: `Function | boolean`

- 默认值: `false`

用于定义一个生成 CSS 模块 ID 的函数。如果不需要将 CSS 样式文件视为一个模块,则可以将 `moduleIds` 设置为 `false`(默认值)。如果需要将 CSS 样式文件视为一个模块,则可以传递一个函数来生成模块 ID,该函数将以样式文件的绝对路径为参数。

#### `exclude`

- 类型: `string[] | Regexp[]`

- 默认值: `[]`

用于指定哪些文件不应该被处理。您可以传递一个字符串数组或一组正则表达式来排除特定文件或文件夹。

通过以上参数,您可以完全控制 `rollup-plugin-css-only` 插件的行为,并将 CSS 样式文件输出到所需的位置。请注意,该插件只适用于分离出单独的 CSS 样式文件。

import { rollup } from 'rollup' import { resolve } from 'path' import vue from '@vitejs/plugin-vue' import { nodeResolve } from '@rollup/plugin-node-resolve' import esbuild from 'rollup-plugin-esbuild' import commonjs from '@rollup/plugin-commonjs' import glob from 'fast-glob' import postcss from 'rollup-plugin-postcss'; import dts from 'rollup-plugin-dts'; import type { TaskFunction } from 'gulp' import type { Plugin } from 'rollup' //项目根目录 const projRoot = resolve(__dirname, '..', '..', '..','..') //包目录 const pkgRoot = resolve(projRoot, 'packages') //输出目录 const epOutput = resolve(projRoot,'dist') //打包入口文件过滤 export const excludeFiles = (files: string[]) => { const excludes = ['node_modules', 'mock', 'gulpfile', 'dist'] return files.filter(path => !excludes.some(exclude => path.includes(exclude))) } export const buildModules: TaskFunction = async () => { const input = excludeFiles( await glob('**/*.{js,ts,vue}', { cwd: pkgRoot, absolute: true, onlyFiles: true, }) ); // 新增插件配置 const plugins: Plugin[] = [ nodeResolve({ extensions: ['.mjs', '.js', '.json', '.ts', '.vue'] }), vue(), // 添加样式处理(关键修复) postcss({ extract: true, // 分离 CSS 文件 modules: true, // 支持 CSS Modules use: ['sass'], // 根据实际预处理器配置 }), esbuild(), commonjs(), ]; const bundle = await rollup({ input, plugins, // 修正 Vue 依赖处理(避免多实例) external: ['vue', /@vue\/.*/, /\.css$/], }); // 主包写入 await bundle.write({ format: 'esm', dir: resolve(epOutput, 'es'), preserveModules: true, preserveModulesRoot: pkgRoot, entryFileNames: `[name].mjs`, }); // 新增:生成类型声明(解决 TS 项目报错) const dtsBundle = await rollup({ input, plugins: [dts()], }); await dtsBundle.write({ dir: resolve(epOutput, 'es'), format: 'esm', }); }; 这是我的打包配置请帮我生成完整的
最新发布
10-16
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值