如何在 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 文件的全部内容，以字符串的形式呈现。你可以根据需要进一步处理这个字符串，例如将其注入到 <style></style> 标签中。

通过以上步骤，你就可以在 Rollup 中轻松地将 CSS 文件内容作为字符串导入并使用了。 记住替换 src/index.ts 和 dist/bundle.js 为你实际的文件路径。

以上是如何在 Rollup 中将 CSS 文件内容输出为字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！