在vue-cli引入postcss外掛的小教程

rottenpen發表於2017-12-18
VueCSS

vue-cli引入postcss了

不知道大家有沒有留意到，新版的vue-cli已經包含了postcss的包，在目錄裡也有了postcss的配置檔案。

在vue-cli引入postcss外掛的小教程

既然官方腳手架都欽定了，那麼作為一個喜歡擁抱潮流（ zuosi ）的前端，怎能不試試新東西呢。正好，最近要重構專案，正好，看了大漠老師的再聊移動端頁面的適配果斷在專案中引入 postcss。

安裝vue-cli+用vue-cli搭建專案

這一步跳過

配置使用postcss

因為新版vue-cli已經引入了postcss，安裝的過程就免了。 ps.引入了兩個包：postcss-import，postcss-loader 那我們只需要直接配置就好了開啟./build/vue-loader.conf.js,可以看到：

loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction,
  }),
複製程式碼

在‘extract: isProduction,’後新增usePostCSS:true，如圖

在vue-cli引入postcss外掛的小教程

現在，我們就可以光明正大地用postcss了。

postcss外掛

以postcss-px-to-viewport為例

npm i postcss-px-to-viewport --save
複製程式碼

在配置檔案.postcssrc.js中新增配置

"postcss-px-to-viewport": { 
      viewportWidth: 750, 
      viewportHeight: 1334, 
      unitPrecision: 5, 
      viewportUnit: 'vw', 
      selectorBlackList: [], 
      minPixelValue: 1, 
      mediaQuery: false 
    },
複製程式碼

看一下效果：

在vue-cli引入postcss外掛的小教程
瀏覽器開啟效果

在vue-cli引入postcss外掛的小教程

最後

配置過程很簡單吧，不過對於更新飛快的 vue-cli，可能這個配置教程很快就過時了，所以說還是好好學習 webpack 才是硬道理。例如現在看看 utils.js 裡 postloader 是怎麼被引入的。

相關文章