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

搜狗截图20年08月01日1631_2

Actual Behavior

but,now is this picture. You can css style is not become effective, because <style> attribute is not appear to html. 搜狗截图20年08月01日1630_1

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)

Most upvoted comments

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, the loader-utils changed the default hashing algo from md5 to md4, but so far it seems that just specifying md5 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 😭