Как я могу заставить webpack автоматически исправлять мои файлы s css с помощью этой конфигурации?

Question

Мне нужна помощь с веб-пакетом, использующим s css и autoprefixer. Почему-то не могу заставить работать автопрефиксатор. Мой файл cofig довольно уникален. Любая помощь будет принята с благодарностью, я пытался изменить конфигурацию разными способами, и я много гуглил, но, похоже, ничего не работает.

это моя конфигурация веб-пакета

/* eslint-disable import/no-extraneous-dependencies */
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const SVGSpritemapPlugin = require("svg-spritemap-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const CopyPlugin = require("copy-webpack-plugin");
require("@babel/polyfill");

module.exports = {
  devtool: "source-map",
  mode: "development",

  entry: {
    app: "./src/index.js",
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
  },

  resolve: {
    extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"],
  },
  externals: {
    jquery: "jQuery",
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              cacheDirectory: true,
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "../[path][name].[ext]",
              context: "src",
            },
          },
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },

          {
            loader: "postcss-loader",
            options: {
              autoprefixer: {
                grid: true,
                browsers: ["last 2 versions, IE11"],
              },
              parser: "postcss-scss",
              sourceMap: true,
              plugins: () => [autoprefixer],
            },
          },

          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/[name].css",
    }),
    new VueLoaderPlugin(),
    new SVGSpritemapPlugin("src/images/sprites/**/*.svg", {
      output: {
        svg4everybody: true,
      },
      sprite: {
        generate: {
          use: true,
        },
      },
    }),
    new CopyPlugin([
      {
        from: "src/img",
        to: "img",
      },
    ]),
  ],
};

Answer 1

Иногда стоит почитать документацию :) Недостающие плагины: [autoprefixer, ...];

{
  loader: 'postcss-loader',
  options: {
    plugins: [
      require('postcss-import')(),
      require('stylelint')(),
      ...,
    ]
  }
}

Для удобства переместите конфигурацию поста css в отдельный файл или даже папку.

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    config: {
      path: './config/',
    },
  },
},

Каталог с post.config - config/postcss.config.js

post css .config. js

const cssnano = require('cssnano')
const autoprefixer = require('autoprefixer')
const postcssUrl = require('postcss-url')

module.exports = {
  plugins: [
    postcssUrl({
      url: 'inline',
      maxSize: 50,
    }),
    cssnano({
      safe: true,
    }),
    autoprefixer({
      grid: "autoplace"
    }),
  ],
};