Rollup 中 CSS 文件导入与字符串输出
使用 Rollup 打包项目时，直接 import styles from './styles.css' 导入 CSS 文件并期望 styles 变量为字符串会报错，因为 Rollup 默认不支持非 JavaScript 文件。解决方法是使用 rollup-plugin-import-css 插件。
以下步骤演示如何使用该插件将 CSS 内容作为字符串输出：
-
安装插件: 使用 npm 或 yarn 安装：
npm install rollup-plugin-import-css --save-dev
-
配置 Rollup: 在
rollup.config.js中添加插件：立即学习“前端免费学习笔记（深入）”；
import importCss from 'rollup-plugin-import-css'; export default { input: 'index.ts', output: { file: 'bundle.js', format: 'cjs' }, plugins: [ importCss() ] }; -
导入和使用: 在
index.ts中导入 CSS：import styles from './styles.css'; console.log({ styles });运行
rollup -c后，styles变量将包含 CSS 内容字符串。 这样就能在 Rollup 构建过程中将 CSS 文件内容作为字符串获取，方便后续处理或嵌入到 JavaScript 代码中。
