如何使用此配置让 webpack 自动为我的 scss 文件添加前缀？

Question

我正在寻找有关使用 scss 和 autoprefixer 的 webpack 的帮助。出于某种原因，我无法让 autoprefixer 工作。我的 cofig 文件非常独特。任何帮助将不胜感激，我一直在尝试以多种方式修改配置并且我一直在谷歌搜索但似乎没有任何效果。

这是我的 webpack 配置

/* 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')(),
      ...,
    ]
  }
}

为了更好的顺序，请将 postcss 配置移动到单独的文件甚至文件夹中。

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

目录 post.config - config/postcss.config.js

postcss.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"
    }),
  ],
};

如何使用此配置让 webpack 自动为我的 scss 文件添加前缀？

How can I get webpack to autoprefixe my scss files using this configuration?

sass

webpack

autoprefixer