vue使用postcss_使用PostCSS进行优化和缩小

vue使用postcss

在上一教程中，您学习了如何使用PostCSS来帮助您的样式表更加跨浏览器兼容，尤其是处理因支持IE的旧版本而引起的问题。

在本教程中，我们将学习如何使用PostCSS来执行各种缩小和优化操作，从而使样式表更高效，加载更快。

您将学习如何：

• 即使您的某些样式表来自Bower组件或npm模块，也可以通过@import规则将多个样式表合并为一个，从而确保只需要一个http请求即可加载网站CSS。
• 将匹配的媒体查询合并为一个，使您可以在开发过程中在多个位置使用相同的媒体查询，但最终在最终样式表中仍然可以提高合并查询的效率。
• 使用cssnano包可以执行各种优化，从去除空白和注释到最小化某些类型的代码等等。

让我们开始吧！

设置您的项目

您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。 如果您还不喜欢其中一种，那么我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的，因此您应该发现使用起来更加简单。

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

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

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件 ，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。 然后在终端或命令提示符指向文件夹的情况下，运行命令npm install 。

安装插件

在本教程中，我们将使用两个单独的插件以及一个插件包。 通过在项目文件夹中运行以下命令来安装它们：

npm install postcss-import css-mqpacker cssnano --save-dev

现在已经安装了插件，让我们继续将它们加载到您的项目中。

通过Gulp加载插件

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

var atImport = require('postcss-import');
var mqpacker = require('css-mqpacker');
var cssnano = require('cssnano');

现在，将每个这些新变量名称添加到processors数组中：

var processors = [
		atImport,
		mqpacker,
		cssnano
	];

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

通过Grunt加载插件

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

processors: [
          require('postcss-import')(),
          require('css