Css-loader: Problem compiling a spreadsheet

[karlguillotte]

Just starting with css-modules. Trying to compile the file below. And I get the error below. Why am I getting that error?

Thanks!

Error: composition is only allowed when selector is single :local class name not in ".primary", ".primary" is weird

.common {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    padding: 20px 26px;
}

.primary {
    composes: common;
    background-color: blue;
}

[cehoffman]

@karlguillotte did you figure it out? Just starting with CSS modules myself and got the same problem. This feels just like the XKCD comic

[karlguillotte]

@cehoffman Ah ah! Like your picture. I should have posted the solution. Unfortunately, I do not remember the solution, but is an easy fix. Let's start with your CSS loader configuration. What is your configuration?

[cehoffman]

Thank @karlguillotte, use this loader configuration with webpack 2 beta and postcss is configured to use precss.

    loaders: [{
      test: /\.css$/,
      loader: [
        'style',
        'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        'postcss',
      ],
    }],

[karlguillotte]

I have a similar configuration.

Could you try adding a _s_ to _loader_?

https://webpack.github.io/docs/using-loaders.html#configuration

http://www.webpackbin.com/ is a good resource to get you starting a webpack project.

[samcorcos]

I ended up with the same problem, though I solved the error by changing the syntax to use cssnext.

:root {
  --button {
    color: white;
    border-radius: 5px;
    border: 1px;
    padding: 0.8rem 2rem;
    cursor: pointer;
    font-size: 1em;
    align-self: center;
  }
}

.primary {
  @apply --button;
  background: rgb(239, 95, 78);
}

My webpack config:

  module: {
    loaders: [{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]!postcss')
      }]
  },
  postcss: function () {
    return [cssnext]
  },