本文将为你介绍如何使用 NPM 包 @gluons/rollup-plugin-postcss-only 来在项目中应用 PostCSS 样式处理工具。
什么是 PostCSS？
PostCSS 是一个 CSS 处理工具，它可以让我们用 JavaScript 来写实现特定功能的插件，从而实现更优秀的 CSS 处理。
什么是 @gluons/rollup-plugin-postcss-only？
在开发中，我们使用 Rollup.js 作为模块打包器，而在使用 Rollup.js 进行模块打包时，我们需要使用到处理器，而 @gluons/rollup-plugin-postcss-only 就是其中一种样式处理器。
@gluons/rollup-plugin-postcss-only 的使用教程
Prerequisites
若想在应用 PostCSS 的同时使用 @gluons/rollup-plugin-postcss-only，那么你需要确保系统已经安装了以下依赖项：
- node.js（版本大于等于 8.0.0）
- npm（版本大于等于 5.2.0）
安装 @gluons/rollup-plugin-postcss-only
你可以通过以下命令来安装 @gluons/rollup-plugin-postcss-only：
npm install --save-dev @gluons/rollup-plugin-postcss-only
配置 PostCSS
在使用 @gluons/rollup-plugin-postcss-only 对样式进行处理之前，我们先来进行 PostCSS 的配置。
在项目根目录下，创建 postcss.config.js 文件，并在其中配置 PostCSS 的插件和功能。
module.exports = { plugins: [ require('autoprefixer'), require('precss') ] }
在这个示例中，我们安装了两个插件，分别是 Autoprefixer 和 PreCSS。（它们都是非常流行的 PostCSS 插件）
Rollup 配置
在使用了 PostCSS 后，我们还需要来配置 Rollup.js，以便它可以识别并处理我们的样式文件。
-- -------------------- ---- ------- ------ ----------------- ---- ------------------------------------- ------ ------- - -------- - ------------------- -- -------- -- - --展开代码
有时候我们需要指定一些特殊的配置来生成我们需要的样式，如是否压缩或者提供 Sourcemaps。在这里，我们可以添加这些配置。
-- -------------------- ---- ------- ------ ----------------- ---- ------------------------------------- ------ ------- - -------- - ------------------- -- ---- ---------- ---------- ----- -- -- ------- ----- -- ------- ------- ----------- -------- --------- -- --------------------------- ------- -------- -------- -------------- -- - --展开代码
使用示例
// 在你的 JavaScript 模块中引入该样式文件 import './your-styles.css';
如此，通过以上的步骤，你就成功使用了 @gluons/rollup-plugin-postcss-only 来将样式文件应用到项目中，并让样式得到了 PostCSS 的优化。
结论
本文详细介绍了 @gluons/rollup-plugin-postcss-only 的使用方法，并同时介绍了基本的 PostCSS 配置，如果你是前端初学者，那么这将对你提供指导，同时如果你已经具备了某些经验，这也会帮助你更好地使用 PostCSS，并进一步提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeeda17efcef77a054b7536
