webpack4+postcss-loader

2022-09-27 16:09:11

问题

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,
            }
        }
    ]
},

webpack4+postcss-loader

码农公寓

问题

答疑

postcss.config.js文件配置

webpack

相关文章