css-loader: style is not affective on vue demo
- Operating System: window10
- Node Version: v10.15.3
- NPM Version: 6.4.1
- webpack Version: 4.44.1
- css-loader Version: 4.2.0
Expected Behavior
I use wepback make a simple vue demo, try to use scss-loader parse scss style, expect below picture
Actual Behavior
but,now is this picture. You can css style is not become effective, because <style> attribute is not appear to html.
Code
{
test: /\.scss$/,
use: [
{
loader: 'vue-style-loader',
options: {
// sourceMap: false,
// shadowMode: false,
},
},
{
loader: 'css-loader',
options: {
// sourceMap: false,
// importLoaders: 2,
// modules: {
// localIdentName: '[name]_[local]_[hash:base64:5]',
// },
},
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
},
},
],
}
// additional code, HEY YO remove this block if you don't need it
Solution
I try to downgrade css-loader to 3.5.3,webpack builded ok,I dont know why is it.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 22 (18 by maintainers)
I believe, I know why it happens: in their update from v3.6.0 to v4.0.0 they bumped
loader-utils
dependency from v1.2.3 to v2.0.0. That altered generated hashes in class names, and right away breaks any web app setups with server-side rendering, as hashes generated at server-side (usually with alternative tools) mismatch hashes generated by webpack-bundled JS. Very bad,css-loader
guys did not noticed this change, and have not mentioned it explicitly as a huge breaking change in the release notes.Also, I am still struggling to figure out how to achieve old hash values with the latest
css-loader
. I figured out, theloader-utils
changed the default hashing algo frommd5
tomd4
, but so far it seems that just specifyingmd5
explicitly still does not result in the old values. Should be some extra changes affecting hashes (or might be I am doing something stupid).UPDATED: And I found the second reason of changed hashes: https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L60 It used to join the path and class name by
+
in v3.6.0, now it joins them by\u0000
. As it is hard-coded, there is no way to keep hash values with v3.6.0 > v4.2.0 upgrade 😭