PostCSS 是一套利用JS插件實(shí)現(xiàn)的用來改變CSS的工具.這些插件能夠支持變量和混合語法，轉(zhuǎn)換未來CSS語法，內(nèi)聯(lián)圖片，還有更多

我們用過 Less 、 SASS 等工具來對(duì)CSS做 預(yù)處理 操作，按照它們約定的語法來書寫并且最終轉(zhuǎn)換成可用的樣式，這付出的代價(jià)是 必須先熟悉這個(gè)工具的書寫語法 。

隨著近幾年 Grunt 、 Gulp 、 Webpack 等自動(dòng)化工具的興起， 組合式應(yīng)用 變得非常的熱門，那 PostCSS 存在的意義是什么呢？答案是： CSS生態(tài)系統(tǒng)

PostCSS 擁有非常多的插件，諸如自動(dòng)為CSS添加瀏覽器前綴的插件 autoprefixer 、當(dāng)前移動(dòng)端最常用的 px 轉(zhuǎn) rem 插件 px2rem ，還有支持尚未成為CSS標(biāo)準(zhǔn)但特定可用的插件 cssnext ，還有很多很多。就連著名的 Bootstrap 在下一個(gè)版本 Bootstrap 5 也將使用 PostCSS 作為樣式的基礎(chǔ)。

一句話來概括PostCSS： CSS編譯器能夠做到的事情，它也可以做到，而且能夠做得更好。

一、PostCSS安裝

安裝PostCSS通常涉及使用npm（Node Package Manager）或者yarn等JavaScript包管理器。以下是使用npm進(jìn)行安裝的基本步驟：

1.確保環(huán)境準(zhǔn)備就緒：

首先，確保已安裝Node.js環(huán)境，可通過終端或命令提示符運(yùn)行 node -v 和 npm -v 來確認(rèn)Node.js和npm的版本是否正確安裝并可用。

2.初始化項(xiàng)目（如果尚未初始化）：

如果您在一個(gè)新項(xiàng)目中并且沒有package.json文件，可以運(yùn)行 npm init 命令創(chuàng)建一個(gè)新的Node.js項(xiàng)目。

3.安裝PostCSS：

在項(xiàng)目根目錄下打開終端或命令提示符，然后運(yùn)行以下命令將PostCSS作為開發(fā)依賴項(xiàng)安裝：

npm install postcss --save-dev

4.選擇和安裝插件：

PostCSS的核心本身不包含任何具體的CSS處理功能，它的強(qiáng)大之處在于眾多可選的插件，比如Autoprefixer（用于自動(dòng)添加瀏覽器前綴）、PreCSS（支持預(yù)處理器如Sass-like語法）等。根據(jù)需求安裝所需插件，例如：

   npm install autoprefixer --save-dev

二、PostCSS使用

1.配置PostCSS：

創(chuàng)建一個(gè)PostCSS配置文件，如 .postcssrc.js, postcss.config.js 或 postcss.config.json，指定要使用的插件及其選項(xiàng)。例如，在postcss.config.js中：

   module.exports = {
     plugins: [
       require('autoprefixer')({
         /* autoprefixer的配置選項(xiàng) */
       }),
       // 其他插件...
     ]
   };

2.集成到構(gòu)建工具：

若要在實(shí)際項(xiàng)目中應(yīng)用PostCSS，通常將其與構(gòu)建工具如Webpack、Gulp、Grunt或Rollup結(jié)合使用。例如，在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.運(yùn)行編譯：

當(dāng)設(shè)置了上述配置后，當(dāng)你運(yùn)行構(gòu)建命令時(shí)，Webpack或其他構(gòu)建工具會(huì)自動(dòng)調(diào)用PostCSS處理CSS文件，應(yīng)用插件們提供的轉(zhuǎn)換功能。

4.手動(dòng)編譯：

對(duì)于獨(dú)立使用的情況，可以編寫腳本來調(diào)用PostCSS CLI編譯CSS文件，正如之前提到的命令：

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

三、使用PostCSS配合構(gòu)建工具

1.Webpack集成

在Web開發(fā)中，PostCSS常與Webpack這樣的構(gòu)建工具集成使用。在Webpack的配置文件（webpack.config.js）中，您需要設(shè)置對(duì)應(yīng)的loader來處理CSS文件，并引入PostCSS-loader：

// webpack.config.js
const path = require('path');
module.exports = {
  // ...其他配置項(xiàng)...
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配.css文件
        use: [
          'style-loader', // 將CSS注入到JS中，以便動(dòng)態(tài)加載至頁面
          'css-loader', // 解析CSS文件中的import和其他加載器不能識(shí)別的語法
          {
            loader: 'postcss-loader', // 引入PostCSS-loader
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, 'postcss.config.js'), // 引入PostCSS配置文件
              },
            },
          },
        ],
      },
    ],
  },
  // ...其他配置項(xiàng)...
};

2.編寫PostCSS配置文件

在項(xiàng)目中創(chuàng)建一個(gè)PostCSS配置文件（如postcss.config.js），定義所使用的插件及其選項(xiàng)：

// postcss.config.js
module.exports = {
  plugins: [
    // 自動(dòng)添加CSS前綴
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions'],
    }),
    // 將px轉(zhuǎn)換為vw（響應(yīng)式單位轉(zhuǎn)換）
    require('postcss-px-to-viewport')({
      viewportWidth: 750, // 視窗寬度
      unitPrecision: 3, // 單位換算的精度
      viewportUnit: 'vw', // 換算后的單位
      selectorBlackList: ['.ignore'], // 不轉(zhuǎn)換的類名
      minPixelValue: 1, // 最小轉(zhuǎn)換數(shù)值
      mediaQuery: false, // 是否在媒體查詢中也轉(zhuǎn)換
    }),
    // CSS優(yōu)化
    require('cssnano')({
      preset: 'default', // 使用默認(rèn)的優(yōu)化配置
    }),
  ],
};

3.手動(dòng)處理CSS文件

若不使用構(gòu)建工具，可以直接通過PostCSS的命令行接口（CLI）處理CSS文件：

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

在這個(gè)命令中，input.css是源文件，output.css是經(jīng)過PostCSS處理后的輸出文件，--config參數(shù)指定了配置文件的位置。

四、PostCSS 插件推薦與示例

PostCSS的強(qiáng)大之處在于其豐富的插件生態(tài)系統(tǒng)，下面列舉一些常用的PostCSS插件以及它們的主要功能：

Autoprefixer:

功能：自動(dòng)為CSS樣式規(guī)則添加適當(dāng)?shù)墓?yīng)商前綴，確保兼容性。
安裝與使用：npm install autoprefixer --save-dev，并在配置文件中啟用它。

PreCSS:

 功能：允許在CSS中使用類似Sass、Less等預(yù)處理器的特性，如變量、嵌套規(guī)則、混合宏等。
安裝與使用：npm install precss --save-dev，并在PostCSS配置中添加該插件。

PostCSS-Preset-Env:

功能：使你能使用未來的CSS規(guī)范草案特性，并根據(jù)目標(biāo)瀏覽器的支持情況自動(dòng)轉(zhuǎn)譯成當(dāng)前可用的CSS語法。
安裝與使用：npm install postcss-preset-env --save-dev，并配置相應(yīng)的瀏覽器兼容目標(biāo)。 

PostCSS-Nested:

功能：允許使用嵌套CSS規(guī)則，提高代碼組織性和可讀性。
安裝與使用：npm install postcss-nested --save-dev，并在配置文件中啟用。 

PostCSS-Calc:

功能：增強(qiáng)CSS中的calc()函數(shù)，使其能夠處理更復(fù)雜的計(jì)算表達(dá)式。
安裝與使用：npm install postcss-calc --save-dev，并添加至PostCSS插件列表。 

PostCSS-Custom-Properties (也稱為CSS Variables):

功能：支持CSS自定義屬性（CSS Variables），使得在CSS中使用變量成為可能。
安裝與使用：npm install postcss-custom-properties --save-dev，并啟用此插件。 

PostCSS-Color-Function:

功能：允許使用類似HSLA、RGBA等顏色函數(shù)來創(chuàng)建和變換顏色值。
安裝與使用：npm install postcss-color-function --save-dev，并將其添加到PostCSS配置中。 

CSSNano:

功能：CSS代碼壓縮和優(yōu)化工具，減少最終產(chǎn)出CSS文件的大小。
安裝與使用：npm install cssnano --save-dev，一般在生產(chǎn)環(huán)境中啟用以優(yōu)化生產(chǎn)環(huán)境的CSS資源。 

每個(gè)插件都需要在PostCSS配置文件中正確配置和引入，以便在構(gòu)建過程中生效。務(wù)必查閱每個(gè)插件的官方文檔以獲取更詳細(xì)的安裝和配置指南。 

五、PostCSS 結(jié)合構(gòu)建工作流

除了上面提到的與Webpack等構(gòu)建工具集成外，PostCSS還可以與各種不同的構(gòu)建系統(tǒng)和任務(wù)運(yùn)行器配合使用，例如：

Gulp

在Gulp構(gòu)建系統(tǒng)中，可以利用gulp-postcss插件處理CSS文件：

// 先確保已安裝必要的插件
npm install gulp-postcss gulp-sourcemaps autoprefixer --save-dev
// 在gulpfile.js中配置PostCSS任務(wù)
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('process-css', function () {
  var processors = [
    require('autoprefixer')({/* autoprefixer選項(xiàng) */}),
    // 添加其他所需的PostCSS插件
  ];
  return gulp.src('src/**/*.css')
    .pipe(sourcemaps.init()) // 初始化源映射
    .pipe(postcss(processors)) // 運(yùn)行PostCSS處理
    .pipe(sourcemaps.write('.')) // 寫出源映射文件
    .pipe(gulp.dest('dist')); // 輸出處理過的CSS文件到dist目錄
});

Grunt

在Grunt構(gòu)建工具中，可以使用grunt-postcss插件執(zhí)行PostCSS任務(wù)：

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

Rollup

對(duì)于使用Rollup進(jìn)行模塊打包的應(yīng)用，可以通過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'], // 處理哪些擴(kuò)展名的文件
      extract: 'dist/bundle.css', // 抽取出CSS到單獨(dú)文件
      plugins: [
        require('autoprefixer')({/* autoprefixer選項(xiàng) */})
        // 添加其他所需的PostCSS插件
      ]
    })
  ]
};

總之，無論哪種構(gòu)建工具，PostCSS都能靈活地融入其中，發(fā)揮強(qiáng)大的CSS處理能力。

六、PostCSS 開發(fā)實(shí)踐

1.開發(fā)過程中的實(shí)時(shí)更新：

在開發(fā)過程中，為了實(shí)現(xiàn)實(shí)時(shí)預(yù)覽CSS效果，可以結(jié)合諸如browser-sync等工具與PostCSS一起使用，當(dāng)CSS文件發(fā)生變化時(shí)自動(dòng)刷新瀏覽器頁面。

   // 舉例：在Gulp中結(jié)合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.風(fēng)格檢查和規(guī)范化：

使用諸如stylelint、stylefmt等插件，可以在PostCSS管道中進(jìn)行CSS代碼風(fēng)格的校驗(yàn)和格式化。

   // 在PostCSS配置文件中添加stylelint和stylefmt
   module.exports = {
     plugins: [
       require('stylelint')(), // CSS代碼風(fēng)格檢查
       require('stylefmt')({ /* stylefmt選項(xiàng) */ }), // 格式化CSS代碼
       // 其他插件...
     ]
   };

3.CSS Modules：

PostCSS也可以通過postcss-modules等插件支持CSS Modules，這有助于防止樣式命名沖突和實(shí)現(xiàn)局部作用域。

   // 在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，內(nèi)部已經(jīng)集成了PostCSS處理機(jī)制，可以讓開發(fā)者在JavaScript中書寫CSS樣式的邏輯，同時(shí)也能享受到PostCSS帶來的各種好處。

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

Visual Studio Code 的集成：

可以通過安裝vscode-postcss-sorting、vscode-stylelint等VS Code擴(kuò)展，實(shí)現(xiàn)編輯器內(nèi)實(shí)時(shí)的PostCSS插件功能，如排序CSS屬性、檢查CSS代碼風(fēng)格等。

IDE集成：

許多現(xiàn)代IDE如WebStorm、IntelliJ IDEA等都支持PostCSS，用戶可以通過配置IDE內(nèi)置的CSS預(yù)處理器設(shè)置，將PostCSS與特定插件關(guān)聯(lián)起來，從而在編寫和預(yù)覽CSS時(shí)得到實(shí)時(shí)反饋。

Git Hooks：

通過在項(xiàng)目的Git鉤子（如pre-commit）中集成PostCSS，可以在提交代碼前自動(dòng)運(yùn)行PostCSS及相關(guān)插件進(jìn)行代碼檢查和優(yōu)化，確保符合代碼規(guī)范并保持一致性。

持續(xù)集成/持續(xù)部署(CI/CD)：

在CI/CD流程中，可以配置自動(dòng)化任務(wù)，在構(gòu)建階段自動(dòng)運(yùn)行PostCSS處理CSS文件，確保發(fā)布的代碼始終經(jīng)過恰當(dāng)?shù)霓D(zhuǎn)換和優(yōu)化。

組件庫和設(shè)計(jì)系統(tǒng)：

如今很多UI組件庫和設(shè)計(jì)系統(tǒng)如Ant Design、Material UI等都在內(nèi)部采用PostCSS進(jìn)行樣式處理和定制，增強(qiáng)了CSS的靈活性和可維護(hù)性。

靜態(tài)站點(diǎn)生成器(SSG)：

對(duì)于Jekyll、Hugo、Gatsby等靜態(tài)站點(diǎn)生成器，通過集成PostCSS，可以在生成網(wǎng)站的過程中自動(dòng)轉(zhuǎn)換和優(yōu)化CSS代碼。

通過這些深度集成，PostCSS不僅僅是一個(gè)簡(jiǎn)單的CSS處理工具，而是一種貫穿整個(gè)前端開發(fā)流程的技術(shù)手段，大大提升了CSS開發(fā)效率和產(chǎn)出質(zhì)量。隨著前端社區(qū)的發(fā)展，PostCSS的功能和應(yīng)用場(chǎng)景也會(huì)更加豐富多元。

到此這篇關(guān)于postcss安裝和使用的文章就介紹到這了,更多相關(guān)postcss安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！