umi配置extraPostCSSPlugins詳解

extraPostCSSPlugins為了定義定義額外的 PostCSS 插件，格式為數組。

• 什么是PostCss
  是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。官網：https://www.postcss.com.cn/。 Autoprefixer 插件就是PostCss插件。
  PostCSS 一般不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件並進行配置。
• 下面將具體介紹如何在 Webpack中使用 PostCSS 的 postcss-px2viewport插件。
  Webpack 中使用 postcss-loader 來執行插件處理。在下面的代碼 中，postcss-loader 用來對.css 文件進行處理，並添加在 style-loader 和 css-loader 之后。通過一個額外的 postcss 方法來返回所需要使用的 PostCSS 插件。require(‘postcss-px2viewport’) 的作用是加載 postcss-px2viewport插件。

var px2viewport = require('postcss-px2viewport'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function() { return [px2viewport({viewportWidth: 750})]; } } 

• 在umi中配置postcss-px2viewport插件
  umi已經內置了postcss-loader，配置postcss-px2viewport非常簡單，只需在.umirc.js中進行如下配置即可。

import px2viewport from 'postcss-px2viewport'; export default { extraPostCSSPlugins:[ px2viewport({viewportWidth: 750}) ] }

  extraPostCSSPlugins: [
    pxToViewPort({
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['node_modules', '.hairlines', '.am-'],
      minPixelValue: 1,
      mediaQuery: false,
    }),
  ],

 

作者：岩_424f
鏈接：https://www.jianshu.com/p/f1f6ce592388
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。