問題
- postcss.config.js是公用的配置，postcss-loader官網示例，只要你配置了postcss-loader，它就會默認加載項目根目錄下的postcss.config.js文件，所以如果postcss.config.js名字不變，路徑位置不變，是可以不必再在配置中寫入它的路徑參數的，本項目目前為止，即使刪除樣式的rule中配置的postcss-loader的options.config.path，所有樣式也依然可以正常被編譯。
- 在不刪除配置的options.config.path的情況下，因為在postcss.config.js中配置了parser:'postcss-scss'但實際上，該配置在項目中並不是只有scss的rule有引用，css和less的rule也都有引用，這本身也是個錯誤的配置。
- 在配置vue-loader時，它對postcss-loader的解析器parser的配置參數位置和rule的樣式對postcss-loader的解析器parser的配置參數位置也有不同之處，如果將parser寫在postcss.config.js文件中，這里就會有沖突。
- postcss.config.js文件中plugins的數據書寫格式問題，這個問題困擾我很久… 因為我曾修改過該文件，通過require的方式引入該文件，卻因書寫的數據格式錯誤而無法讓插件起作用，一直未找到原因，在仔細閱讀官網參數配置規則時，才恍然大悟~
答疑
-
第一個問題，如果想簡單點，那就按照官網的來，固定的名字，固定的位置即可，vue-loader配置postcss-loader同樣能默認加載名為postcss.config.js的文件配置，而且還支持：.postcssrc.js這個名字，同時還支持在package.json中配置的postcss,當然樣式配置的postcss-loader也支持這兩種方式。如果想要改變位置，或者想更加方便控制自己的項目，還是更推薦引入的方式。
-
postcss對不同的預處理器有不同的解析器插件,scss的解析器插件是postcss-scss,less的解析器插件是postcss-less,css不需要解析器插件。這就存在着解析器的差異化，最好將該配置從postcss.config.js文件中刪除，這里不僅是三種樣式的解析器參數值的差異化，還包括后期添加vue-loader配置postcss-loader時parser的配置位置的差異化，所以postcss.config.js文件，最好只存在公用的插件配置。
-
添加vue-loader配置postcss-loader時parser的配置位置與三種樣式的postcss-loader配置parser位置也是存在差異化的
-
在本項目中，我是以對象的數據格式寫的postcss.config.js文件的配置，在我聲明一個變量接收這些配置將其暴露出來，並在webpack配置文件中require引入，在postcss-loader的options中調用時，這些插件卻都不再起作用，起初完全不知道哪里出了問題，在仔細閱讀官方參數配置規則后，發現，在postcss-loader的options中配置plugins，只接收array以及function格式的數據，它並不能接收object格式的數據。
postcss.config.js文件配置
module.exports = {
parser: 'postcss-scss',
plugins: {
'autoprefixer':{},
"postcss-aspect-ratio-mini": {}, // 主要用來處理元素容器寬高比
"postcss-write-svg": { utf8: false }, // 用來畫1像素線
'postcss-px-to-viewport': {
viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉換`px`
}
}
}
webpack
// postcss.config.js
const postcssPlugins = {
plugins: [
require('autoprefixer')(),
require('postcss-aspect-ratio-mini')(),
require('postcss-write-svg')({ utf8: false }),
require('postcss-px-to-viewport')({
viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉換`px`
}),
]
}
module.exports = postcssPlugins;
// webpack.dev.conf.js
// 頭部引用
const postcss = require('./postcss.config');
// rules中調用
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader',
options: {
plugins:postcss.plugins,
sourceMap: true,
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins:postcss.plugins,
parser: 'postcss-scss',
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
exclude: /node_modules/
},{// 編譯less
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
plugins:postcss.plugins,
parser: 'postcss-less',
sourceMap: true,
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
}
}
]
},