Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

223
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!