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

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

? 版權聲明
THE END
喜歡就支持一下吧
點贊15 分享