Postcss Modules not loading

[RobAWilkinson]

Postcss modules are no longer loading in my storybooks, regular css modules work fine, but using any processors doesnt work.

webpack config.js:

const path = require('path');

// postcss
const variables = require("../client/variables.json").variables;

// PostCSS plugins
console.log("VARIABLES", variables);
const simpleVars = require("postcss-simple-vars")({
  variables: () => variables,
  unknown: (node, name, result) => node.warn(result, `Unknown variable ${name}`),
});
const moduleValues = require('postcss-modules-values');
const nestedCss = require("postcss-nested");
const localByDefault = require('postcss-modules-local-by-default');
const extractImports = require('postcss-modules-extract-imports');
const scope = require('postcss-modules-scope');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules=1!postcss',
        include: path.resolve(__dirname, '../')
      },
    ],
  },
  postcss: [
      simpleVars,
      moduleValues,
      nestedCss,
      localByDefault,
      extractImports,
      scope
  ]
};

this issue looks related to #270

[Jabher]

you're probably missing importLoaders=1

[ndelangen]

@RobAWilkinson can you confirm this fixes the issue?

[RobAWilkinson]

@ndelangen I actually got it working by instead going back to my previosu config and adding things one by one here is mine

const path = require('path');

// postcss
const variables = require("../client/variables.json").variables;

// PostCSS plugins
console.log("VARIABLES", variables);
const simpleVars = require("postcss-simple-vars")({
  variables: () => variables,
  unknown: (node, name, result) => node.warn(result, `Unknown variable ${name}`),
});
const moduleValues = require('postcss-modules-values');
const nestedCss = require("postcss-nested");
const localByDefault = require('postcss-modules-local-by-default');
const extractImports = require('postcss-modules-extract-imports');
const scope = require('postcss-modules-scope');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.resolve(__dirname, '../')
      },
    ],
  },
  postcss: function() {
    return [
      simpleVars,
      moduleValues,
      nestedCss,
      localByDefault,
      extractImports,
      scope
  ]
  } 
};

Hope this helps someone!

We are using react storybook within a meteor, react, postcss project.

[ndelangen]

Thanks for posting the config that worked for you. I hope it helps anyone, Cheers!