Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

60
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.

7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs