如何在 Rollup 中導入 CSS 文件并將其輸出為字符串？

Rollup 中導入 css 并將其作為字符串輸出

使用 Rollup 構建項目時，直接導入 CSS 文件會報錯，因為 Rollup 默認不支持非 JavaScript 文件。 為了將 CSS 文件導入并輸出為字符串，我們需要借助 rollup-plugin-import-css 插件。

首先，安裝插件：

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

然后，在 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 });

styles 變量現在將包含 styles.css 文件的 CSS 代碼字符串。 運行 rollup -c 命令后，你就可以在 bundle.js 中看到這個字符串輸出了。 這避免了直接處理 CSS 文件的麻煩，并允許你將 CSS 內容動態地集成到你的 JavaScript 代碼中。