“/ / modules’ attribute is invalid,” requireModuleExtension “; “/ / modules’ attribute is invalid;” / / modules’ attribute is invalid; “/ / modules’ attribute is invalid;” / / modules’ attribute is invalid; “/ / modules’ attribute is invalid; I didn’t want to look at the official website after the change how to set this property, the setting is as follows:

CSS: {// extract: true, // enable source maps? SourceMap: false, // loaderOptions: {}, // enable CSS modules for all CSS/pre-processor Files. false requireModuleExtension: false }Copy the code

Then found a problem, the project of element component style is not effective, we haven’t started to think up this attribute changes, thinking is others to write program code, which side is likely to be reference has a problem, check to check anyway and check out the problem on the code, then felt something strange, calm for a while and then see where he changed, “RequireModuleExtension” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attribute “attribute” attributeYou see, requireModuleExtension is the opposite of Modules. Set it to requireModuleExtension: true.

As for why it is set to requireModuleExtension: True will cause the style to not take effect. The reason is that CSS modules will compile the class name in style to a hash string, and dom will compile to a hash string using the corresponding style.xxx syntax. This will avoid style contamination. If style.xxx is not written in the DOM, the end result is that the CHass in the DOM is not compiled as a hash string, so the class name pair does not render the style invalid.

Check out Ruan Yifeng’s article on CSS Modules:www.ruanyifeng.com/blog/2016/0…