Version 5.2.6 hashes are different on Windows (Ok on Mac)

[dmh19900611]

Dear auth:

bundle.css .index__my-node___4029n{

Applied class name class=".index__my-node___503l9"

package.json

"dependencies": { "antd": "^3.19.5", "babel-plugin-react-css-modules": "^5.2.6", "dva": "^2.6.0-beta.6", "lodash": "^4.17.15", "moment": "^2.24.0", "react": "^16.8.6", "react-dom": "^16.8.6", "styled-components": "^4.3.2", "umi-request": "^1.2.6" }, "devDependencies": { "babel-eslint": "^9.0.0", "eslint": "^5.4.0", "eslint-config-umi": "^1.4.0", "eslint-plugin-flowtype": "^2.50.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-react": "^7.11.1", "husky": "^0.14.3", "lint-staged": "^7.2.2", "postcss-less": "^3.1.4", "react-test-renderer": "^16.7.0", "umi": "^2.7.7", "umi-plugin-react": "^1.8.4" },

babelPlugin config: ["react-css-modules", { "filetypes": { ".less": {"syntax": "postcss-less"} }, "generateScopedName": '[name]__[local]___[hash:base64:5]' }]

css-loader version: └─┬ umi@2.11.3 └─┬ umi-build-dev@1.15.1 └─┬ af-webpack@1.13.1 └── css-loader@2.1.1

generic-names version: └─┬ babel-plugin-react-css-modules@5.2.6 ├── generic-names@2.0.1 └─┬ postcss-modules@1.4.1 └── generic-names@1.0.3

what else do you need ? please contact me.

thank you.

[gajus]

Sounds like an issue somewhere with converting paths. As I don't use Windows, I won't be able to help. PRs welcome.

[ahwgs]

I have the same problem,Is there any way to solve this problem?

[avaforvr]

In a project with Next.js and Scss, I suffered the same problem. Hope the following method can help you.

Solution:

1. Install plugins:

   npm install generic-names path

2. Add a function that generates scoped name with generic-names

   
   const path = require('path');
   const genericNames = require('generic-names');

// change the scope rule as you need const generate = genericNames('[local]__[hash:base64:5]', { context: process.cwd() });

const generateScopedName = (localName, filePath) => { var relativePath = path.relative(process.cwd(), filePath); return generate(localName, relativePath); };

3. Config css-loader options

{ importLoaders: 1, // scoped class 格式 // localIdentName: "[local]__[hash:base64:5]", getLocalIdent: (context, localIdentName, localName) => { return generateScopedName(localName, context.resourcePath) } }

### Reason：
The documentation requires that `context` must match webpack context configuration. Because the hash conversion requires two parameters, local class name and the scss file path (context is related to file path).  For example, a class  `.local-container` in a file `components/Example/style.scss`, When converting the hash value, it needs to be combined into a string like `components/Example/style.scss+local-container`.

In Mac system, slash in file path is `/`, and in windows is `\`, generic-names converts the slash into `/`, css-loader does not do that.

Therefore, css-loader generates different hash values in mac and windows. Converting slashes is more reasonable. So I think it's a bug of css-loader.

`getLocalIdent` in  css-loader options can return any value you need. Using generic-names can solve the problem.

[xuxinhang]

Its seems that generic-names has the different behavior on the Windows path slash \ after this version. (To be honest, I really cannot catch the motivation to do such a change.)

css-loader uses its own function to generate a scope name, however, babel-plugin-react-css-modules indirectly uses generic-names to generate a scope name.

[SHERlocked93]

it still not work for me T.T