1. 背景

• css的預處理器語言（比如 sass， less， stylus）的擴展性不好，你可以使用它們已有的功能，但如果想做擴展就沒那么容易。

• sass是很常用的css預處理器語言，在webpack中要使用它，需要安裝sass-loader，而sass-loader又依賴于node-sass。大家知道node-sass很龐大，安裝極其緩慢，經常安裝失敗。而且node-sass各版本對于node版本有嚴格限制，經常造成為了安裝某個node-sass版本而升級node版本的問題（在本地這沒有問題，但在服務器上升級node可能牽連很大）。

• vue項目，都安裝了postcss（因為它是vue-loader的依賴項）。我們沒必要再安裝其它工具處理css。

2. 什么是PostCSS？

• 它是一個js庫，能夠將css轉換成js。

• 它將css轉換成AST語法樹（表現為js對象），然后借助各種plugins對轉化后的js對象進行操作，最終轉化回css。

• 所以說postcss是不會影響css的，只有安裝和配置plugin之后，才會影響css。

• postcss可以看作是css的babel。

3. 如何在vue項目中使用和配置PostCSS？

3.1 webpack中如何使用PostCSS

使用webpack的vue項目，都會安裝vue-loader（它是一個webpack的loader，用來將vue sfc組件轉換成js模塊）。而vue-loader正是借助postcss實現scoped css的，因此安裝了vue-loader就默認安裝了postcss。當然默認它并不包含我們需要的特性，因此我們就要安裝插件并配置。

關于安裝何種插件，我們會在后面介紹幾種常用的插件。

vue-loader可以自動加載以下3種postcss的配置文件

1. postcss.config.js

2. .postcssrc

3. package.json 中的postcss字段

這里我們主要介紹第一種postcss.config.js，其格式如下

注意： 需要先安裝插件

module.exports = {plugins: [['postcss-import', { path: ['src/css/'] }],'postcss-mixins','postcss-nested','postcss-color-mod-function',['postcss-cssnext', {warnForDuplicates: false,}],['cssnano', {sourcemap: false,autoprefixer: false,safe: true,discardComments: {removeAll: true,},discardUnused: false,zindex: false,}]]
};

對postcss的配置，可以查閱 GitHub - webpack-contrib/postcss-loader: PostCSS loader for webpack

3.2 rollup中如何使用PostCSS

rollup需要引入rollup-plugin-postcss，并在rollup.config.js配置postcss，樣例如下

rollup-plugin-postcss的配置，參見官方文檔

// rollup.config.js
import postcss from 'rollup-plugin-postcss'export default {plugins: [postcss({plugins: []})]
}

4. 常用PostCSS插件

postcss-import4.1?postcss-import：允許從其它 css 文件引入css。

注意：這個插件一般需要放在插件列表的第一位，這樣才能保證其它的插件工作正常。

方式：

• 引入時，指定路徑，則從路徑下查找

@import '../css/styles.css';

• 配置中指定 path， 并直接引入文件名，此時會從path查找

// postcss.config.js
['postcss-import', { path: ['src/css/'] }] // 在postcss.config.js中，指定path

// 在文件中引入
@import 'styles.css'; // 會加載src/css/styles.css

4.2?: 允許mixin

注意： 如果和postcss-simple-vars或者postcss-nested同用，此插件必須放在postcss-simple-vars或者postcss-nested之前

4.3?：允許像scss那樣定義變量

$dir:    top;
$blue:   #056ef0;
$column: 200px;.menu_link {background: $blue;width: $column;
}
.menu {width: calc(4 * $column);margin-$(dir): 10px;
}

4.4?：允許書寫嵌套語法

// postcss.config.js
module.exports = {plugins: [['postcss-import', { path: ['src/css/'] }],'postcss-nested']
};

4.5?：用來壓縮css

4.6?：在老舊瀏覽器上使用新的或者未來的css特性

該插件包含豐富的可選功能，可查看文檔選擇。這里主要用其控制自定義變量（custom variables），所以介紹如何配置以支持custom variables。

// 配置
module.exports = {plugins: [['postcss-import', { path: ['src/css/'] }],['postcss-preset-env', {stage: 2,// preserve 決定所有的插件是否接受preserve屬性（保留（true）或者忽略（false）其它polyfilled css（css的兜底方案）），// 這里preserve: false很關鍵，否則，自定義變量不起效preserve: false, // feature詳情可查看https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md// 它里面有每個特性的文檔和樣例features: {'custom-selectors': true, // 自定義選擇器'custom-properties': true, // 自定義變量},// importFrom 用來指定從哪里導入各類變量（比如 Custom Media, Custom Properties, Custom Selectors, Environment Variables）// 如果只引入單個文件，可以不用數組importFrom: ['./src/css/colorDef.css']}]]
};

引入變量時，不需要使用@import

<style lang="postcss" scoped>/* 變量--color-danger 是在 'src/css/colorDef.css'文件定義的， 但不用導入css文件 */.about {.about-details {color: var(--color-danger);width: 100px;}}
</style>

postcss-preset-env 可以配置多個特性，見特性列表。

4.7?postcss-px-to-viewport

rem響應式布局的缺陷：必須通過js來動態控制根元素font-size的大小。

postcss-px-to-viewport 的配置項

{unitToConvert: "px", // 要轉化的單位viewportWidth: 3024, // UI設計稿的寬度unitPrecision: 2, // 轉換后的精度，即小數點位數propList: ["*"], // 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vwfontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位，默認vw// selectorBlackList: ["wrap"], // 指定不轉換為視窗單位的類名，minPixelValue: 1, // 默認值1，小于或等于1px則不進行轉換// mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認falsereplace: true, // 是否轉換后直接更換屬性值// exclude: [/node_modules/], // 設置忽略文件，用正則做目錄名匹配landscape: false // 是否處理橫屏情況
}

5. 團隊介紹

「三翼鳥數字化技術平臺-ToC服務平臺」以用戶行為數據為基礎，利用推薦引擎為用戶提供“千人千面”的個性化推薦服務，改善用戶體驗，持續提升核心業務指標。通過構建高效、智能的線上運營系統，全面整合數據資產，實現數據分析-人群圈選-用戶觸達-后效分析-策略優化的運營閉環，并提供可視化報表，一站式操作提升數字化運營效率。