如何在 Rollup 中成功導(dǎo)入 CSS 文件并將其內(nèi)容作為字符串輸出？

Rollup 導(dǎo)入 css 文件并將其內(nèi)容作為字符串輸出

在使用 Rollup 構(gòu)建項(xiàng)目時(shí)，直接導(dǎo)入 CSS 文件會(huì)報(bào)錯(cuò)，因?yàn)?Rollup 默認(rèn)不支持非 JavaScript 文件。 解決方法是使用 rollup-plugin-import-css 插件。

以下步驟演示如何配置 Rollup 以實(shí)現(xiàn)將 CSS 文件內(nèi)容作為字符串導(dǎo)入：

1. 安裝插件:

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

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

npm install rollup-plugin-import-css --save-dev # 或 yarn add rollup-plugin-import-css --dev

2. 配置 Rollup:

在 rollup.config.JS (或你的 Rollup 配置文件) 中，導(dǎo)入并配置插件：

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

3. 導(dǎo)入 CSS:

在你的 index.ts (或你的入口文件) 中，保持原有的導(dǎo)入方式：

import styles from './styles.css';  console.log({ styles }); // styles 現(xiàn)在包含 CSS 內(nèi)容的字符串

現(xiàn)在，styles 變量將包含 styles.css 文件的 CSS 內(nèi)容，以字符串的形式輸出。 無(wú)需修改導(dǎo)入語(yǔ)句，插件會(huì)自動(dòng)處理。

通過以上步驟，你就可以在 Rollup 中成功導(dǎo)入 CSS 文件，并將其內(nèi)容作為字符串輸出，方便在你的 JavaScript 代碼中使用。