2024年postcss-cli

PostCSS 拥有非常多的插件，诸如自动为CSS添加浏览器前缀的插件 autoprefixer 、当前移动端最常用的 px 转 rem 插件 px2rem ，还有支持尚未成为CSS标准但特定可用的插件 cssnext ，还有很多很多。就连著名的 Bootstrap 在下一个版本 Bootstrap 5 也将使用 PostCSS 作为样式的基础。

一句话来概括PostCSS： CSS编译器能够做到的事情，它也可以做到，而且能够做得更好。

一、PostCSS安装

安装PostCSS通常涉及使用npm（Node Package Manager）或者yarn等JavaScript包管理器。以下是使用npm进行安装的基本步骤：

1.确保环境准备就绪：

首先，确保已安装Node.js环境，可通过终端或命令提示符运行 node -v 和 npm -v 来确认Node.js和npm的版本是否正确安装并可用。

2.初始化项目（如果尚未初始化）：

如果您在一个新项目中并且没有package.json文件，可以运行 npm init 命令创建一个新的Node.js项目。

3.安装PostCSS：

在项目根目录下打开终端或命令提示符，然后运行以下命令将PostCSS作为开发依赖项安装：

npm install postcss --save-dev

4.选择和安装插件：

PostCSS的核心本身不包含任何具体的CSS处理功能，它的强大之处在于众多可选的插件，比如Autoprefixer（用于自动添加浏览器前缀）、PreCSS（支持预处理器如Sass-like语法）等。根据需求安装所需插件，例如：

 npm install autoprefixer --save-dev

二、PostCSS使用

1.配置PostCSS：

创建一个PostCSS配置文件，如 .postcssrc.js, postcss.config.js 或 postcss.config.json，指定要使用的插件及其选项。例如，在postcss.config.js中：

 module.exports = { plugins: [ require('autoprefixer')({ /* autoprefixer的配置选项 */ }), // 其他插件... ] };

2.集成到构建工具：

若要在实际项目中应用PostCSS，通常将其与构建工具如Webpack、Gulp、Grunt或Rollup结合使用。例如，在Webpack中，配置loader来处理CSS文件，并指向PostCSS：

 // webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { // 或直接引用config文件路径：'config': './path/to/postcss.config.js' plugins: [require('autoprefixer')] } } } ] } ] } };

3.运行编译：

当设置了上述配置后，当你运行构建命令时，Webpack或其他构建工具会自动调用PostCSS处理CSS文件，应用插件们提供的转换功能。

4.手动编译：

对于独立使用的情况，可以编写脚本来调用PostCSS CLI编译CSS文件，正如之前提到的命令：

 postcss src/index.css -o build/index.css

三、使用PostCSS配合构建工具

1.Webpack集成

在Web开发中，PostCSS常与Webpack这样的构建工具集成使用。在Webpack的配置文件（webpack.config.js）中，您需要设置对应的loader来处理CSS文件，并引入PostCSS-loader：

// webpack.config.js const path = require('path'); module.exports = { // ...其他配置项... module: { rules: [ { test: /\.css$/, // 匹配.css文件 use: [ 'style-loader', // 将CSS注入到JS中，以便动态加载至页面 'css-loader', // 解析CSS文件中的import和其他加载器不能识别的语法 { loader: 'postcss-loader', // 引入PostCSS-loader options: { postcssOptions: { config: path.resolve(__dirname, 'postcss.config.js'), // 引入PostCSS配置文件 }, }, }, ], }, ], }, // ...其他配置项... };

2.编写PostCSS配置文件

在项目中创建一个PostCSS配置文件（如postcss.config.js），定义所使用的插件及其选项：

// postcss.config.js module.exports = { plugins: [ // 自动添加CSS前缀 require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'], }), // 将px转换为vw（响应式单位转换） require('postcss-px-to-viewport')({ viewportWidth: 750, // 视窗宽度 unitPrecision: 3, // 单位换算的精度 viewportUnit: 'vw', // 换算后的单位 selectorBlackList: ['.ignore'], // 不转换的类名 minPixelValue: 1, // 最小转换数值 mediaQuery: false, // 是否在媒体查询中也转换 }), // CSS优化 require('cssnano')({ preset: 'default', // 使用默认的优化配置 }), ], };

3.手动处理CSS文件

若不使用构建工具，可以直接通过PostCSS的命令行接口（CLI）处理CSS文件：

npx postcss input.css -o output.css --config postcss.config.js

在这个命令中，input.css是源文件，output.css是经过PostCSS处理后的输出文件，--config参数指定了配置文件的位置。

四、PostCSS 插件推荐与示例

PostCSS的强大之处在于其丰富的插件生态系统，下面列举一些常用的PostCSS插件以及它们的主要功能：

Autoprefixer:

PreCSS:

PostCSS-Preset-Env:

PostCSS-Nested:

PostCSS-Calc:

PostCSS-Custom-Properties (也称为CSS Variables):

PostCSS-Color-Function:

CSSNano:

每个插件都需要在PostCSS配置文件中正确配置和引入，以便在构建过程中生效。务必查阅每个插件的官方文档以获取更详细的安装和配置指南。

五、PostCSS 结合构建工作流

除了上面提到的与Webpack等构建工具集成外，PostCSS还可以与各种不同的构建系统和任务运行器配合使用，例如：

Gulp

在Gulp构建系统中，可以利用gulp-postcss插件处理CSS文件：

// 先确保已安装必要的插件 npm install gulp-postcss gulp-sourcemaps autoprefixer --save-dev // 在gulpfile.js中配置PostCSS任务 var gulp = require('gulp'); var postcss = require('gulp-postcss'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('process-css', function () { var processors = [ require('autoprefixer')({/* autoprefixer选项 */}), // 添加其他所需的PostCSS插件 ]; return gulp.src('src//*.css') .pipe(sourcemaps.init()) // 初始化源映射 .pipe(postcss(processors)) // 运行PostCSS处理 .pipe(sourcemaps.write('.')) // 写出源映射文件 .pipe(gulp.dest('dist')); // 输出处理过的CSS文件到dist目录 });

Grunt

在Grunt构建工具中，可以使用grunt-postcss插件执行PostCSS任务：

// 先确保已安装必要的插件 npm install grunt-postcss autoprefixer --save-dev // 在Gruntfile.js中配置PostCSS任务 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { map: true, // 生成sourcemaps processors: [ require('autoprefixer')({/* autoprefixer选项 */}), // 添加其他所需的PostCSS插件 ] }, dist: { src: 'src//*.css', dest: 'dist/' } } }); grunt.registerTask('default', ['postcss']); };

Rollup

对于使用Rollup进行模块打包的应用，可以通过rollup-plugin-postcss插件整合PostCSS：

// 先确保已安装必要的插件 npm install rollup-plugin-postcss autoprefixer --save-dev // 在rollup.config.js中配置PostCSS插件 import postcss from 'rollup-plugin-postcss'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ postcss({ extensions: ['.css'], // 处理哪些扩展名的文件 extract: 'dist/bundle.css', // 抽取出CSS到单独文件 plugins: [ require('autoprefixer')({/* autoprefixer选项 */}) // 添加其他所需的PostCSS插件 ] }) ] };

总之，无论哪种构建工具，PostCSS都能灵活地融入其中，发挥强大的CSS处理能力。

六、PostCSS 开发实践

1.开发过程中的实时更新：

在开发过程中，为了实现实时预览CSS效果，可以结合诸如browser-sync等工具与PostCSS一起使用，当CSS文件发生变化时自动刷新浏览器页面。

 // 举例：在Gulp中结合browser-sync与PostCSS var browserSync = require('browser-sync').create(); gulp.task('serve', function() { browserSync.init({ server: { baseDir: './dist' } }); gulp.watch('src//*.css', gulp.series('process-css', browserSync.reload)); });

2.风格检查和规范化：

使用诸如stylelint、stylefmt等插件，可以在PostCSS管道中进行CSS代码风格的校验和格式化。

 // 在PostCSS配置文件中添加stylelint和stylefmt module.exports = { plugins: [ require('stylelint')(), // CSS代码风格检查 require('stylefmt')({ /* stylefmt选项 */ }), // 格式化CSS代码 // 其他插件... ] };

3.CSS Modules：

PostCSS也可以通过postcss-modules等插件支持CSS Modules，这有助于防止样式命名冲突和实现局部作用域。

 // 在Webpack配置中启用CSS Modules { test: /\.css$/, use: [ 'style-loader', 'css-loader?modules', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-modules')() ] } } } ] }

4.主题和变量管理：

利用像postcss-simple-vars或postcss-custom-properties这样的插件，可以在CSS中声明和使用变量，便于管理和切换主题。

5.CSS-in-JS支持：

有些框架或库如styled-components，内部已经集成了PostCSS处理机制，可以让开发者在JavaScript中书写CSS样式的逻辑，同时也能享受到PostCSS带来的各种好处。

七、PostCSS 与其他工具的深度集成

Visual Studio Code 的集成：

可以通过安装vscode-postcss-sorting、vscode-stylelint等VS Code扩展，实现编辑器内实时的PostCSS插件功能，如排序CSS属性、检查CSS代码风格等。

IDE集成：

许多现代IDE如WebStorm、IntelliJ IDEA等都支持PostCSS，用户可以通过配置IDE内置的CSS预处理器设置，将PostCSS与特定插件关联起来，从而在编写和预览CSS时得到实时反馈。

Git Hooks：

通过在项目的Git钩子（如pre-commit）中集成PostCSS，可以在提交代码前自动运行PostCSS及相关插件进行代码检查和优化，确保符合代码规范并保持一致性。

持续集成/持续部署(CI/CD)：

在CI/CD流程中，可以配置自动化任务，在构建阶段自动运行PostCSS处理CSS文件，确保发布的代码始终经过恰当的转换和优化。

组件库和设计系统：

如今很多UI组件库和设计系统如Ant Design、Material UI等都在内部采用PostCSS进行样式处理和定制，增强了CSS的灵活性和可维护性。

静态站点生成器(SSG)：

对于Jekyll、Hugo、Gatsby等静态站点生成器，通过集成PostCSS，可以在生成网站的过程中自动转换和优化CSS代码。

通过这些深度集成，PostCSS不仅仅是一个简单的CSS处理工具，而是一种贯穿整个前端开发流程的技术手段，大大提升了CSS开发效率和产出质量。随着前端社区的发展，PostCSS的功能和应用场景也会更加丰富多元。

到此这篇关于postcss安装和使用的文章就介绍到这了,更多相关postcss安装内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

Vue3使用postcss-px-to-viewport实现页面自适应
关于Vue中postcss-pxtorem的使用详解
vue3如何使用postcss-px-to-viewport适配屏幕
Vue PostCSS的使用介绍
vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀
使用Vite处理css less及postcss示例详解
vue中使用postcss-px2rem的两种方法
vue3.0中使用postcss-pxtorem的具体方法

目录