brimarq
commented
4 years ago I'm having the same issue with a basic HTML/CSS/JS project in Webpack 4.41.2 using postcss-normilize plugin with { allowDuplicates: false, forceImport: true } in postcss-loader , then css-loader and style-loader. I have three css imports in my entry js file resulting in three <style> tags in <head>, each one prepended with the normalize css. I get the same result if I move two of the imports into my main css file with @import.
FWIW, I also tried using the style-loader { injectType: 'singletonStyleTag' } option and normalize css is repeated three times in a single <style> tag.
It seems like the only workaround for those of us with multiple css imports is to import normalize.css once, either in our entry js or main css files, but we don't need this plugin to do that.
How To Reproduce:
1) create a basic project with webpack 4 and postcss 2) for postcss-normalize set
forceImport: trueoption 3) in entry file add several imports "[someName].css" 4) build project https://github.com/Yegorich555/FromScratch_React/tree/postcss-forceImport-bug - for this link use npm run build-dev; 5) look into main.css fileActual behavior
We have postcssNormalize result as many as we have css imports in main.js https://www.screencast.com/t/uBP6hZegP
Expected behavior
forceImportshould inject normalize-result once independently on the number of css imports into main.js. Also, this reason why it also doesn't work with *.vue files since ones have several css import (scoped and global)