Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

220
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda