Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

219
Vistas
The output from the postcss webpack does not display the css prefix

I have problem with prefixer in webpack 5 bundler. After proper implementation, not all prefix requirements are created for me.

I work with SASS, so all input files are .scss, I am attaching an excerpt from webpack.config.js:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const purgecss = require('@fullhuman/postcss-purgecss');
const dir = path.resolve(__dirname, '.');

const productionConfig = {

    optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      },

    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "postcss-loader",
              "sass-loader"
            ],
          },
        ]
      },

      plugins: [
        new MiniCssExtractPlugin({
        filename: '[name].[chunkhash:8].css',
        chunkFilename: "[id].css"
        }),
    ],
};

The output from my dev webpack json is:

asset index.html 355 bytes [emitted]
asset main.2d6b3b71.css 139 bytes [emitted] [immutable] (name: main)
asset main.2d6b3b71.js 0 bytes [emitted] [immutable] [minimized] (name: main)   
Entrypoint main 139 bytes = main.2d6b3b71.css 139 bytes main.2d6b3b71.js 0 bytes
orphan modules 3.02 KiB (javascript) 937 bytes (runtime) [orphan] 9 modules     
cacheable modules 60 bytes (javascript) 138 bytes (css/mini-extract)
  ./src/js/app.js 60 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/base.scss 138 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 4035 ms

Everything will happen to me without the slightest mistake. The problem, however, is that it doesn't add prefixes to me. Thus, matters such as:

::placeholder {
    color: #bada55;
}

body {
    display: grid;
}

They tell me that the placeholder does not appear at all and the grid appears without prefixes.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda