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

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

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

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

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

一、PostCSS安裝

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

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

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

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

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

3.安裝PostCSS：

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

npm install postcss --save-dev

4.選擇和安裝插件：

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

   npm install autoprefixer --save-dev

二、PostCSS使用

1.配置PostCSS：

創(chuàng)建一個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或其他構建工具會自動調(diào)用PostCSS處理CSS文件，應用插件們提供的轉換功能。

4.手動編譯：

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

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

三、使用PostCSS配合構建工具

1.Webpack集成

在Web開發(fā)中，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中，以便動態(tài)加載至頁面
          'css-loader', // 解析CSS文件中的import和其他加載器不能識別的語法
          {
            loader: 'postcss-loader', // 引入PostCSS-loader
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, 'postcss.config.js'), // 引入PostCSS配置文件
              },
            },
          },
        ],
      },
    ],
  },
  // ...其他配置項...
};

2.編寫PostCSS配置文件

在項目中創(chuàng)建一個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, // 最小轉換數(shù)值
      mediaQuery: false, // 是否在媒體查詢中也轉換
    }),
    // CSS優(yōu)化
    require('cssnano')({
      preset: 'default', // 使用默認的優(yōu)化配置
    }),
  ],
};

3.手動處理CSS文件

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

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

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

四、PostCSS 插件推薦與示例

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

Autoprefixer:

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

PreCSS:

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

PostCSS-Preset-Env:

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

PostCSS-Nested:

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

PostCSS-Calc:

功能：增強CSS中的calc()函數(shù)，使其能夠處理更復雜的計算表達式。
安裝與使用：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資源。 

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

五、PostCSS 結合構建工作流

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

Gulp

在Gulp構建系統(tǒng)中，可以利用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插件執(zhí)行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都能靈活地融入其中，發(fā)揮強大的CSS處理能力。

六、PostCSS 開發(fā)實踐

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

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

   // 舉例：在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.風格檢查和規(guī)范化：

使用諸如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，這有助于防止樣式命名沖突和實現(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處理機制，可以讓開發(fā)者在JavaScript中書寫CSS樣式的邏輯，同時也能享受到PostCSS帶來的各種好處。

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

Visual Studio Code 的集成：

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

IDE集成：

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

Git Hooks：

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

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

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

組件庫和設計系統(tǒng)：

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

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

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

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

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

最新評論