如何在 Rollup 中导入 CSS 文件并将其作为字符串输出？

Rollup 中 css 文件导入与字符串输出

使用 Rollup 打包项目时，直接 import styles from ‘./styles.css‘ 导入 CSS 文件并期望 styles 变量为字符串会报错，因为 Rollup 默认不支持非 JavaScript 文件。解决方法是使用 rollup-plugin-import-css 插件。

以下步骤演示如何使用该插件将 CSS 内容作为字符串输出：

1. 安装插件: 使用 npm 或 yarn 安装：

   npm install rollup-plugin-import-css --save-dev

2. 配置 Rollup: 在 rollup.config.JS 中添加插件：

   立即学习“前端免费学习笔记（深入）”；

   import importCss from 'rollup-plugin-import-css';  export default {   input: 'index.ts',   output: {     file: 'bundle.js',     format: 'cjs'   },   plugins: [     importCss()   ] };

3. 导入和使用: 在 index.ts 中导入 CSS：

   import styles from './styles.css';  console.log({ styles });

   运行 rollup -c 后，styles 变量将包含 CSS 内容字符串。 这样就能在 Rollup 构建过程中将 CSS 文件内容作为字符串获取，方便后续处理或嵌入到 JavaScript 代码中。