Skip to content

Same file name but different directory, after build hash is same.(use css module) #464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
cedcn opened this issue Mar 23, 2017 · 5 comments

Comments

@cedcn
Copy link

cedcn commented Mar 23, 2017

Dir1 (test.css)
.input { display: block }
Dir2 (test.css)
.input { display: none }

Webpack loader options
loader: 'style-loader!css-loader?sourceMap&modules&hashPrefix=23&importLoaders=1&localIdentName=[path][name]-[local]--[hash:base64:5]!postcss-loader?sourceMap&sourceComments',

After Build

.test-input--IPxQk { display: block }
.test-input--IPxQk { display: none }

The class name is conflict.

@mrchief
Copy link

mrchief commented Mar 29, 2017

I'm having the same issue. I also tried changing localIdentName=[path][name]-[local]--[hash:base64:5] param to diff combinations like:

localIdentName=[path][name]-[local]--[hash:base64:7]
localIdentName=[name]-[local]--[hash:base64:5]
localIdentName=[name]-[local]--[hash:base64:7]

but to no avail. It creates same classes with same hashes (even with 7).

@mrchief
Copy link

mrchief commented Mar 29, 2017

Btw, #413 also talks about same issue

@hugorodrigues
Copy link

Same problem here (webpack 2)

@hugorodrigues
Copy link

hugorodrigues commented Mar 30, 2017

I found some workarounds while trying to debug my issue.

This is the code responsible for resolving the localIdentName:

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
var loaderUtils = require("loader-utils");
var path = require("path");

module.exports = function getLocalIdent(loaderContext, localIdentName, localName, options) {
	if(!options.context)
		options.context = loaderContext.options && typeof loaderContext.options.context === "string" ? loaderContext.options.context : loaderContext.context;
	var request = path.relative(options.context, loaderContext.resourcePath);
	options.content = options.hashPrefix + request + "+" + localName;
	localIdentName = localIdentName.replace(/\[local\]/gi, localName);
	var hash = loaderUtils.interpolateName(loaderContext, localIdentName, options);
	return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^((-?[0-9])|--)/, "_$1");
};

As you can see, even if you set localIdentName=[path][name]-[local]--[hash:base64:7] the [path] will only be evaluated to the filename only (because the context will be the same/current folder) and that will cause the conflict (eg. files can have the same name).

Workaround 1: Add the context option to your css-loader config and point to the root of your project (or whatever makes sense for you). Now the entire path will be used for generating the hash.

Workaround 2: Define your own resolving function by adding getLocalIdent to your css-loader config (check the Readme for that)

(While this works for me, I don't have much experience with css-loader to make a PR or suggest that this should be the default behaviour)

@michael-ciniawsky
Copy link
Member

@hugorodrigues thx I will check that solution, we plan to overhaul css-loader in v1.0.0 and address issues like that. Could you post the part of your webpack.config.js with that setup and PR even if for discussion is highly welcome aswell 😛

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants