【yy讲解PostCSS是如何安装和使用】

🎥博主：程序员不想YY啊
💫CSDN优质创作者，CSDN实力新星，CSDN博客专家
🤗点赞🎈收藏⭐再看💫养成习惯
✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！

0. 👉前言

PostCSS 是一个使用 JavaScript 插件转换CSS代码的工具，这些插件可以让你使用未来的CSS特性、优化CSS文件的大小，或者是在CSS文件中嵌入一些编程逻辑。可以帮助开发者自动化处理CSS代码，例如自动添加浏览器前缀、压缩代码等。

1. 👉安装 PostCSS

通常，PostCSS 是作为项目开发依赖安装的，你可以通过npm或者yarn这样的包管理器来进行安装。在你开始之前，确保你已经安装了Node.js和npm。

🌻使用npm安装

npm install postcss postcss-cli --save-dev

这里同时安装了 postcss-cli，这是PostCSS的命令行接口，可以让你在命令行中运行PostCSS。

🌻使用yarn安装

yarn add postcss postcss-cli --dev

PostCSS本身只提供了基础的CSS处理功能，需要安装其他插件来增强功能。例如，autoprefixer插件可以自动添加浏览器前缀，cssnano插件可以压缩CSS代码。在命令行中输入以下命令安装插件：

🌻安装autoprefixer插件

npm install autoprefixer --save-dev

🌻安装cssnano插件

npm install cssnano --save-dev

2. 👉使用 PostCSS

安装完毕后，你就可以开始使用PostCSS了。假设你已经有了一些CSS文件并希望通过PostCSS进行处理。

🎥方法一：命令行工具

创建一个简单的PostCSS配置文件 postcss.config.js，并在里面加入你所需要的插件：

module.exports = {plugins: [// 在这里加入你要使用的插件require('autoprefixer'),// 其他插件]
};

然后你可以通过CLI命令来转换CSS：

npx postcss src/css/style.css --output dist/css/style.css

或者，如果你已经在项目中配置了package.json脚本，你也可以加入一个脚本来运行PostCSS：

"scripts": {"build-css": "postcss src/css/style.css -o dist/css/style.css"
}

然后在命令行中运行：

npm run build-css

🎥方法二：与构建工具结合

PostCSS通常与如Webpack、Gulp这样的构建工具一起使用：

❤️Webpack中使用PostCSS

安装所需插件：

npm install --save-dev postcss-loader autoprefixer css-loader style-loader

在 webpack.config.js 中配置loader：

module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}}]}]}
};

❤️Gulp中使用PostCSS

安装所需插件：

npm install --save-dev gulp-postcss autoprefixer gulp-sourcemaps

在 gulpfile.js 中配置task：

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');gulp.task('css', () => {return gulp.src('src/css/*.css').pipe(sourcemaps.init()).pipe(postcss([autoprefixer()])).pipe(sourcemaps.write('.')).pipe(gulp.dest('dist/css'));
});

然后运行gulp任务：

gulp css

以上给出了几种安装和使用PostCSS的方法，具体使用的插件和构建过程可能会根据个别项目的需求有所不同。