如何在 Rollup 中將 CSS 文件內容輸出為字符串？

Rollup 中將 css 文件內容導入為 JavaScript 字符串

在使用 Rollup 打包 JavaScript 項目時，直接導入 CSS 文件并將其內容作為字符串使用并非 Rollup 的默認行為。 嘗試直接 import CSS 文件會導致 “unexpected Token” 錯誤，提示需要插件處理非 JavaScript 文件。

解決方法是使用 rollup-plugin-import-css 插件。該插件能夠將 CSS 文件導入到 JavaScript 模塊中，并將 CSS 內容作為字符串導出。

步驟一：安裝插件

使用 npm 或 yarn 安裝 rollup-plugin-import-css：

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

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

步驟二：配置 Rollup

在你的 Rollup 配置文件 (例如 rollup.config.JS 或 rollup.config.ts) 中添加該插件：

import importCSS from 'rollup-plugin-import-css';  export default {   input: 'src/index.ts', // 你的入口文件   output: {     file: 'dist/bundle.js', // 輸出文件     format: 'cjs' // 或其他你需要的格式   },   plugins: [     importCSS()   ] };

步驟三：導入 CSS 并使用

在你的 JavaScript 文件 (例如 src/index.ts) 中，你可以像這樣導入 CSS 文件：

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

現在，styles 變量將包含 styles.css 文件的全部內容，以字符串的形式呈現。你可以根據需要進一步處理這個字符串，例如將其注入到

通過以上步驟，你就可以在 Rollup 中輕松地將 CSS 文件內容作為字符串導入并使用了。 記住替換 src/index.ts 和 dist/bundle.js 為你實際的文件路徑。