vue使用postcss_PostCSS深入研究：使用“ PreCSS”进行预处理

vue使用postcss

在最后两个 教程中，我们研究了在完成的样式表上使用PreCSS来增强其跨浏览器兼容性和优化的方法，基本上是作为后处理器。 在本教程中，您将学习使用PostCSS作为预处理器，就像使用Stylus，Sass或LESS一样。

使用PostCSS进行预处理的主要方法有两种。 一种是选择您自己的所有插件以添加所需的预处理器功能，另一种是安装一包预选的插件，以便您可以立即进行操作。

我们将从最快最简单的方法开始，安装由乔纳森·尼尔（Jonathan Neal）创建的出色的PreCSS插件包。 在此之后的教程中，我们将继续介绍如何仅使用所需的功能来组合自己的预处理器。

本教程将假定您对预处理器（如Stylus，Sass或LESS）中常见的功能有所了解。 这纯粹是因为我们将重点介绍如何可以通过PostCSS使用相同类型的功能，而不是什么功能实际上做。 即便如此，即使您以前从未使用过预处理器，也可能是一个理想的起点。

试用PreCSS Live

在下一节中，我们将介绍如何使用PreCSS设置Gulp或Grunt项目，但是，如果您想使用一个捷径，（现在），您可以选择使用Live Demo Playground来尝试代码。我们将在本教程中进行介绍。 可以在左侧窗口中键入代码，它会自动为您编译并显示在右侧窗口中。

设置您的项目

您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。 如果您没有一个或另一个偏好，我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的。

您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

• PostCSS快速入门指南：Gulp设置或
• PostCSS快速入门指南：Grunt设置

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件 ，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。

然后，在终端或命令提示符指向该文件夹的情况下，运行命令npm install 。

安装PreCSS

无论您使用的是Gulp还是Grunt，请使用以下命令将PreCSS安装到项目中：

npm install precss --save-dev

作为Gulp插件加载

如果您使用的是Gulp，请将此变量添加到文件中已存在的变量下：

var precss = require('precss');

现在，将新的变量名称添加到processors数组中：

var processors = [
		precss
	];

通过运行gulp css命令，然后检查项目的“目标”文件夹中是否已出现新的“ style.css”文件，来快速测试一切是否正常。

加载为Grunt插件

如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：