Storybook-readme: Styles not applied in a CSS-Modules project

Created on 21 Mar 2017  路  5Comments  路  Source: tuchk4/storybook-readme

My project uses CSS Modules. Following the Readme instructions, I have a webpack.config like this...

module.exports = {
  module: {
    loaders: [
      {
        test: /\.md$/,
        loader: 'raw'
      }, {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.css$/,
        exclude: 'storybook-readme',
        loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]',
      }
    ]
  }
};

But the outputted Readme text renders un-styled. The formatting is correct, but the styles are not applied.

All 5 comments

try this

loaders: [{
  test: /highlight\.js\/styles.+\.css$/,
  loader: 'style!css',
}, {
  test: /github\-markdown\-css\/.+\.css$/,
  loader: 'style!css',
}, {
  test: /\.css$/,
  exclude: [
    /highlight\.js\/styles.+\.css$/,
    /github\-markdown\-css\/.+\.css$/,
  ],
  loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss',
}],

In nearest days I will update addon and there will be no webpack additional configurations

Cool, that's fixed it. Looking forward to the update.

Here's the full working webpack config for anyone who might need it.

module.exports = {
  module: {
    loaders: [
      {
        test: /\.md$/,
        loader: 'raw'
      }, {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /highlight\.js\/styles.+\.css$/,
        loader: 'style!css',
      },
      {
        test: /github-markdown-css\/.+\.css$/,
        loader: 'style!css',
      },
      {
        test: /\.css$/,
        exclude: [
          /highlight\.js\/styles.+\.css$/,
          /github-markdown-css\/.+\.css$/,
        ],
        loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]',
      }
    ]
  }
};

I have published [email protected] without additional webpack configuration. Only for *.md files

module.exports = {
  module: {
    loaders: [{
      test: /\.md$/,
      loader: "raw"
    }]
  }
};

Cool. I'll update later today and let you know if I run into anything.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

deehuey picture deehuey  路  3Comments

beyondghx picture beyondghx  路  6Comments

janusch picture janusch  路  4Comments

jayknott picture jayknott  路  6Comments

robcaldecottvelo picture robcaldecottvelo  路  5Comments