前言
在前端开发中，我们经常需要使用 CSS 预处理器来编写样式，例如 Sass, Less 和 Stylus 等。一般来说，我们会使用 webpack 和 Gulp 等构建工具将预处理器编译成浏览器可用的 CSS 文件。然而，在使用 Rollup 对 JavaScript 应用进行打包的情况下，我们则需要使用 rollup-plugin-transform-postcss 插件来将预处理器编译成 CSS 并导入到 JavaScript 中。
在本文中，我们将深入介绍 rollup-plugin-transform-postcss 的用法，为大家演示如何将一个 Sass 文件打包成一个 JavaScript 模块文件并在浏览器中引用。
安装
我们首先需要在项目中安装 rollup 和 rollup-plugin-transform-postcss：
npm install rollup rollup-plugin-transform-postcss --save-dev
配置
我们创建一个名为 rollup.config.js 的文件，并将以下内容添加到文件中：
-- -------------------- ---- -------
------ ------- ---- ----------------------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
---------
-------- -----
-------- -
-- ----- ------- --
-
--
-
--在上面的配置中，我们导入了 rollup-plugin-transform-postcss 插件，并将其添加到 Rollup 的插件列表中。我们向插件传递了一个 extract 选项，该选项指定我们是否希望将 CSS 从 JavaScript 文件中提取为单独的文件。在我们的示例中，我们将其设置为 true，使插件可以将 CSS 提取为单独的文件。
在插件选项中，我们可以使用一个数组来定义一系列 postcss 插件，这些插件将被用于编译预处理器。
示例
下面我们将创建一个名为 main.scss 的 Sass 文件，并使用 postcss-import 插件导入一个名为 _variables.scss 的变量文件。我们将使用变量文件中的颜色定义来设置页面颜色。示例代码如下：
// main.scss
@import '_variables.scss';
body {
background-color: $primary-color;
}// _variables.scss $primary-color: #4682b4;
我们可以在此处使用 postcss-import 插件，它将 _variables.scss 中的变量编译到 main.scss 文件中。修改我们的配置如下：
-- -------------------- ---- -------
------ ------- ---- ----------------------------------
------ ------------- ---- -----------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
---------
-------- -----
-------- -
---------------
-
--
-
--在我们的示例中使用的是 iife 格式，所以我们需要将以下代码添加到 main.js 文件中，以确保样式正确地被应用到我们的页面中：
import './main.scss';
最后，我们运行 rollup 打包我们的应用程序：
rollup -c
现在我们已经成功地将我们的 Sass 文件编译成了 JavaScript 模块并导入到了我们的应用程序中，可以在浏览器中查看结果了。
结论
在本文中，我们介绍了 rollup-plugin-transform-postcss 的用法，并提供了一个实际示例，展示如何将 Sass 文件编译为 JavaScript 模块文件并在浏览器中使用。通过学习本文，我们可以更好地理解 rollup-plugin-transform-postcss 插件的使用，并在实际项目中中运用到它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005700a81e8991b448e7cb6