postcss支援vue/less/css/sass檔案

陶留軍發表於2018-05-03
CSSVue

使用vue-webpack初始化的構建環境，想要讓px2rem同時支援.vue和.less檔案的px轉換的正確、優雅的配置是如何的？

vue-webpack的預設配置下，如果安裝了postcss-loader和postcss-px2rem，那麼.vue檔案中樣式部分的px會轉換成rem。

為了讓它也支援.less/.css檔案中的px轉rem，大家通常是在build/utils.js的generateLoaders函式中修改一段程式碼如下：

var loaders = [cssLoader];

loaders.push({
    loader: `postcss-loader`,
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
});

這樣，的確已經讓.less/.css等檔案轉換px為rem了。但顯然，現在要進入本文章的主題，同學們在.vue的樣式部分寫一段程式碼：

borer: 1px solid #ddd;/*no*/

你會驚奇的發現，1px被轉換成了rem，如果你不知道/*no*/的作用，說明本文對你沒有作用。

這種現象的原因是，.vue檔案的處理器是vue-loader，它本身已經實現了postcss-loader的載入，所以能自動轉換.vue檔案裡的px單位。但因為在utils.js裡又引入了一次postcss-loader，那麼.vue檔案的處理器最後變成了style,postcss,css,postcss,less(省略了-loader)，而css處理器會刪除註釋，所以導致/*no*/被刪除後，又被postcss-loader處理了一次。

原因知道了，對應的解決方法，大家各顯神通吧。下面是我的解決程式碼：

build/utils.js:

var loaders = [cssLoader];

if (options.postcss) {
  loaders.push({
    loader: `postcss-loader`,
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  });
}

build/webpack.dev.conf.js、build/webpack.prod.conf.js 中 utils.styleLoaders 額外增加引數postcss:true，例如：

utils.styleLoaders({ 
    sourceMap: config.dev.cssSourceMap, 
    postcss: true 
})

相關文章