如何在 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 为你实际的文件路径。

以上是如何在 Rollup 中將 CSS 文件內容輸出為字符串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！