如何在 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 代碼中。