bug: unable to override localIdentName in css-loader settings. generateScopedName also doesn't work.

[stsiarzhanau]

When I change

'css-loader?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]'

to something mor suitable for me, like this:

'css-loader?importLoader=1&modules&localIdentName=[name]__[local]--[hash:6]'

I get unstyled component.

I've also tried to remove part of query string:

'css-loader?importLoader=1&modules'

and set pattern for generated names directly in babel-plugin-react-css-modules config:

'react-css-modules',
  {
    context,
    generateScopedName: '[path]___[name]__[local]___[hash:base64:5]'
  }

It doesn't work even with default value (I get unstyled component again).

I've encountered this problem in my own starter kit (and it takes me more than our to figure out what's going on 😠). But then I did the same in your demo, so to reproduce this bug just run it and try to specify some pattern other than default.

Versions:

{
  "private": true,
  "dependencies": {
    "babel-plugin-react-css-modules": "^2.1.3",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^2.2.0-rc.3"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^2.2.0-rc.0"
  }
}

[bjudson]

Not sure if this helps, but I'm currently having success with:

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    use: [
      "css-loader?importLoaders=1&modules&localIdentName=[name]___[local]",
      "postcss-loader?parser=postcss-scss"
    ]
  })
},
{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          [
            'react-css-modules',
            {
              "generateScopedName": "[name]___[local]",
              "filetypes": {
                ".scss": "postcss-scss"
              }
            }
          ]
        ],
        presets: [
          'react',
          'es2015',
          'stage-3'
        ]
      }
    }
  ]
}

When I tried to configure them with matching hashes, the hashes were calculated differently for some reason. Hashes aren't really necessary for my use case. This does seem like a place where the documentation could be a little more explicit.

[wemyss]

Couldn't get it working with config in .babelrc file while building for production. had to move the plugin into webpack like above

[NE-SmallTown]

Yes,I agree @wemyss says,that's really a big problem.

@gajus Do you have any plan like Extract CSS Files?If I write my own project,I can use ExtractTextPlugin to extract css,that's ok.But recently I write a 3-rd component which use this repo,when I use babel to compile my src to lib directory,you know there are no css files in the lib.So if this repo can't provide a option to extract css to a file like babel-plugin-css-modules-transform does,that's really a little tough.

And after using babel to generate the lib directory,there still exist require('./foo.css')(assuming in the Foo component we use import './foo.css').But just like above says,there are no css files in the lib(though we can use --copy-files,but you know that it won't work because only this repo knows the hash name of each class in css files),so this will cause module resolve error i.e. Cannot find module "./foo.css".

[NE-SmallTown]

I think I have resolved the problem.I modify some src code and make this repo can extract css to one file.

[gajus]

I definitely don't want to duplicate ExtractTextPlugin function inside of this plugin.

You have multiple options. The cleanest is:

1. Use webpack to generate the CSS file.
2. Use a babel plugin to remove CSS imports, e.g. https://github.com/uditalias/babel-plugin-remove-imports.

It is a multi-step build process, but you only need to bundle the CSS when you change the CSS files. Considering this is an edge use case, it is a reasonable requirement.

[NE-SmallTown]

Use webpack to generate the CSS file.

But just like the comment says,if I am writing a project(i.e. just used by me),I can do that.But if I am writing a 3-rd component library,we can't use ExtractTextPlugin because the only command we can use is babel ./src ./lib.We can't use webpack because webpack is not a babel loader and even it is,it doesn't know the generated css by this repo.

The reason I file the pr is that I have tested that wepack can't do that.If I am wrong,please let me know.Thanks.Or you can write a demo to prove that we can do the same thing of my pr with using webpack.

[gajus]

But if I am writing a 3-rd component library,we can't use ExtractTextPlugin because the only command we can use is babel ./src ./lib

Whats the reason you cannot use webpack?

[NE-SmallTown]

To be honest I really don't know how to use webpack if I am writing a 3-rd party component.I need to provide the lib directory which includes es5 version of src and the corresponding css files, but webpack generate dist directory when we publish,if I am writing a project,that's ok,because what I need is exactly the dist directory,I just push them to the online web service and it can work.But if I provide my component to others,I think what the developer need is the lib rather than dist.

If you consider webpack can do this,could you tell me what's the config of webpack I need to write?Thanks.

[gajus]

webpack is definitely the right tool for the job here.

I suggest asking for help either on https://gitter.im/webpack/webpack or Stack Overflow.