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