在使用 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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
344
收藏
