How to make it work with webpack postcss-loader?

[francoisromain]

Hello and thank you for the plugin. I can not get it to work with webpack postcss-loader and postcss-import.

• When it is simply included in the postcss plugins, there is nothing in the output.

  module.exports = {
  plugins: {
  'postcss-normalize': {},
  'postcss-import': {},
  …

• When the force-import option is true, or @import-normalize; is used at the top of the css, it conflicts with postcss-import

WARNING in ./node_modules/css-loader?{"sourceMap":true,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./src/css/styles.css
(Emitted value instead of an instance of Error) postcss-import: …/src/css/styles.css:9:1: @import must precede all other statements (besides @charset)

• When @import 'postcss-normalize'; is at the top of the css, it's not found:

ERROR in ./node_modules/css-loader?{"sourceMap":true,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./src/css/styles.css
Module build failed: Error: Failed to find 'postcss-normalize'

What am I doing wrong here? Thank you

[suazithustra]

+1

[wesleyboar-fka-iosulfur]

I had a similar conflict with postcss-import. My solution, for my setup (not webpack), was to ensure that @import-normalize; was called in a file that had no @import statements. A basic example of my solution/setup:

…/src/styles/generic/normalize.css

@import-normalize;

…/src/styles/generic/opinionated.css

@import ('…/…/h5bp.css');
@import ('…/…/base.css');

…/src/omg-all-the-styles.css

…
@import ('…/generic/normalize.css');
@import ('…/generic/opinionated.css');
…

[jonathantneal]

@wesleyboar’s solution should work for you, and also some of the options have changed since this bug was first reported, as you should be able to specify a manual injection point.

While somewhat tangental, I’ve also added Webpack installation instructions: https://github.com/csstools/postcss-normalize/blob/master/INSTALL.md#webpack