什么是 rollup-plugin-postcss?
rollup-plugin-postcss 是一个用于 Rollup 的插件，它能够将 CSS 文件转换为 JavaScript 模块，以便在 Rollup 中进行打包和优化。此外，rollup-plugin-postcss 还支持使用 PostCSS 插件对 CSS 进行编译和转换。
安装
可以通过 npm 在项目中安装 rollup-plugin-postcss:
npm install -D rollup-plugin-postcss
使用
在你的 Rollup 配置文件中引入 rollup-plugin-postcss 并将其添加到插件列表中：
-- -------------------- ---- -------
------ ------- ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
---------
-
--然后，创建一个 CSS 文件，并在 index.js 中导入它：
import './styles.css';
console.log('Hello, world!');最后，在命令行中运行 Rollup，你应该能够看到打包后的文件中已经包含了样式代码：
rollup -c
配置选项
rollup-plugin-postcss 支持多个配置选项，可以按需进行设置：
- extract: (Boolean | String) 是否将 CSS 提取到单独的文件中，默认为 false。如果设置为 true，那么生成的 CSS 文件将与 JavaScript 文件分离，并且默认情况下将使用 Rollup 的
output.dir配置项中指定的目录。你也可以通过指定一个字符串来自定义提取后的文件名和路径。 - minimize: (Boolean) 是否压缩 CSS，默认为 false。
- plugins: (Array) 用于转换 CSS 的 PostCSS 插件列表。
-- -------------------- ---- -------
------ ------- ---- ------------------------
------ ------------ ---- ---------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
---------
-------- -----
--------- -----
-------- -
--------------
-
--
-
--示例
以下是一个基本的示例，展示了如何使用 rollup-plugin-postcss 将 CSS 转换为 JavaScript 模块并进行打包：
-- -------------------- ---- -------
-- ----------------
------ ------- ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
---------
-
--/* styles.css */
body {
background-color: #f0f0f0;
}// index.js
import './styles.css';
console.log('Hello, world!');运行命令 rollup -c 后，打包后的代码如下：
'use strict';
var styles = ".styles_body__1IbZk {\n background-color: #f0f0f0;\n}\n";
var styles_default = styles;
console.log('Hello, world!');
exports.default = styles_default;此外，如果使用了 extract 选项，将生成一个名为 styles.css 的文件，其中包含 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41442