Composes not working with SCSS files

[shuboc]

I am writing .scss files which composes classes from other files like this:

a.scss

.a {
  composes: container from './b.css';
}

Then I get error messages as follows:

Module build failed: CssSyntaxError: /home/shubo/Desktop/babel-plugin-react-css-modules/demo/src/components/AnonymouseStyleResolution.js: postcss-modules-scope: /home/shubo/Desktop/babel-plugin-react-css-modules/demo/src/components/table.scss:4:3: referenced class name "i__imported_container_0" in composes not found

I am using filetypes options to parse .scss files in my webpack config (to keep things simple, I use only css-loader for scss files):

    loaders: [
      {
        include: path.resolve(__dirname, './src'),
        loaders: [
          'style-loader',
          'css-loader?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ],
        test: /\.(css|scss)$/
      },
      {
        include: path.resolve(__dirname, './src'),
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-react-jsx',
            [
              'react-css-modules',
              {
                context,
                filetypes: {
                  '.scss': 'postcss-scss'
                }
              }
            ]
          ]
        },
        test: /\.js$/
      }
    ]

If I modify the config above as filetypes: {'.scss': ''}, the error goes away.

My guess is the file (b.css) containing the class being composed with is somehow not properly parsed or loaded.

Is there any missing postcss configuration I should add or ideas on how to fix it? Thanks in advance.

[dsempel]

composes is working for me with SCSS files. Your configuration seems good. Maybe try to import b.css somewhere so it is loaded? Or rename to b.scss.

[mmw]

I think you need to set generateScopedName in the plugin options. Something like

...
generateScopedName: "[path]___[name]__[local]___[hash:base64:5]",
fileTypes: {...}

[lagunovsky]

may be

  {
    context,
    filetypes: {
      ".scss": {
        "syntax": "postcss-scss",
        "plugins": ["postcss-icss-composes"]
      }
    }
  }

[ladas-larry]

@shuboc have you managed to resolve this?

[shuboc]

@Dharmoslap The problem seems to be related to the resolution of paths when using syntax like composes: XXX from 'path/to/css';, but I'm not quite sure. Maybe I can keep looking into it and open a PR once I found a solution.

[gajus]

Every time this issue comes up it is a result of misconfigured context property. You must use absolute paths to configure context.

[gajus]

Probably duplicate of:

• Adding "composes" doesn't update className #48 or
• composes .. from ... statements no longer work #22