如何使用 Rollup 導入 CSS 文件并將其作為字符串輸出？

Rollup：優雅地導入和輸出 css 字符串

在使用 Rollup 構建項目時，處理 CSS 文件通常需要一些額外的配置。本文介紹如何使用 Rollup 導入 CSS 文件，并將其內容作為字符串輸出到 JavaScript 代碼中。

挑戰：直接導入 CSS 的局限性

直接在 JavaScript 模塊中導入 CSS 文件（例如 import ‘./styles.css‘）會導致 Rollup 報錯，提示需要插件來處理非 JavaScript 文件。這是因為 Rollup 默認只處理 JavaScript 模塊。

解決方法：使用 rollup-plugin-import-css

rollup-plugin-import-css 插件可以解決這個問題。它允許你導入 CSS 文件，并將 CSS 代碼作為字符串注入到你的 JavaScript 模塊中。

步驟一：安裝插件

立即學習“前端免費學習筆記（深入）”；

使用 npm 或 yarn 安裝插件：

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

步驟二：配置 Rollup

在你的 rollup.config.JS (或類似的配置文件) 中，導入并配置 rollup-plugin-import-css 插件：

import importCss from 'rollup-plugin-import-css';  export default {   input: 'index.ts',   output: {     file: 'bundle.js',     format: 'cjs' // 或其他你需要的格式   },   plugins: [     importCss()   ] };

步驟三：在代碼中導入 CSS

現在，你可以在你的 JavaScript 代碼中導入 CSS 文件，并將其內容作為字符串使用：

import styles from './styles.css';  console.log({ styles }); // styles 現在包含 CSS 字符串

步驟四：構建項目

運行 Rollup 構建命令 (例如 rollup -c)。 styles 變量將包含 styles.css 文件的內容，作為一個字符串。

通過以上步驟，你就可以在 Rollup 項目中輕松地將 CSS 文件導入并作為字符串輸出，方便在運行時動態處理 CSS 代碼。 記住根據你的項目需求選擇合適的輸出格式 (format 選項)。