postcss-import issue

Has anyone gotten react-styleguidist working with postcss-import? I’ve gotten the styleguide.config.js matching my app’s webpack config, but I can’t seem to get around this error:

ERROR in ./source/common/style/layout.css
Module parse failed: /home/rstinogle/hv/webclient/app/products/source/common/style/layout.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

Here is my styleguide.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var glob = require('glob');

module.exports = {
  title: 'HireVue Style Guide',
  styleguideDir: '../styleguide/react',
  components: function() {
    return glob.sync(path.resolve(__dirname, 'source/common/components/**/*.jsx')).filter(function(module) {
      return /\/[A-Z]\w*\.jsx$/.test(module);
    });
  },
  updateWebpackConfig: function(webpackConfig) {
    // Your source files folder or array of folders, should not include node_modules
    var dir = path.join(__dirname, 'source/common/components');

    webpackConfig.babelrc = false;
    webpackConfig.module.loaders = webpackConfig.module.loaders.filter(function(obj) {
      return obj.loader !== 'json';
    });
    // webpackConfig.module.loaders = webpackConfig.module.loaders.filter(function(obj) {
    //   return obj.loader.search('css') === -1;
    // });
    webpackConfig.module.loaders.push (
      {
        test: /\.json$/,
        include: /node_modules/,
        loader: 'json-loader'
      },
      {
        test: /\.(es6|jsx)?$/,
        include: dir,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        include: dir,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!css-theme-loader')
      },
      {
        test: /\.(ttf|eot|svg|woff|gif)(\?v=[0-9].[0-9].[0-9])?$/,
        include: /.*/, // Because styleguidist requires either include or exclude.
        loader: 'url?limit=8192'
      }
    );

    webpackConfig.resolveLoader.alias = {
        'css-theme-loader': path.join(__dirname, './source/css-theme-loader')
    };

    webpackConfig.postcss = [
      require('postcss-import'),
      require('postcss-custom-properties'),
      require('autoprefixer')
    ];

    webpackConfig.resolve.extensions.push('.es6');

    var plugins = [
      new ExtractTextPlugin('[name].css'),
    ];

    webpackConfig.plugins = webpackConfig.plugins.concat(plugins);

    console.log(webpackConfig);
    return webpackConfig;
  }
};

[stinoga]

Closing this. I figured out the problem by editing the example repo.

[deanbrophy]

Just a note: I ran into this issue after ejecting create-react-app. The fix was adding a webpackConfig attribute to my styleguide.config.js.

module.exports = {
  webpackConfig: require("./config/webpack.config.dev.js"),
};