webpack4+postcss-loader
问题
- 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,
}
}
]
},
