Tengo un problema con el prefijo en el paquete webpack 5. Después de la implementación adecuada, no se crean todos los requisitos de prefijo para mí.
Trabajo con SASS, por lo que todos los archivos de entrada son .scss, adjunto un extracto de 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" }), ], };
El resultado de mi dev webpack json es:
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
Todo me pasará sin el más mínimo error. El problema, sin embargo, es que no me agrega prefijos. Así, asuntos como:
::placeholder { color: #bada55; } body { display: grid; }
Me dicen que el placeholder no aparece para nada y la grilla aparece sin prefijos.