Do we still need `vue-style-loader` ?

[Eric Chen]

vue-style-loader haven't update for a long time. Since style-loader v1.x published, I use style-loader to replace it, everything works fine.

Question is:

• Can style-loader work in vue-ssr-project ?
• Can we use options.injectType of style-loader instead options.manualInject of vue-style-loader ?

My answer:

I don't know, because I don't use SSR for now.

[Star Zou]

Any ideas?

[Mr.nobody]

Same here

[Lars Berning]

I was still using vue-style-loader with the webpack-dev-server in a project. But that caused problems when I updated to css-loader 4.0.
Took me quite a while to figure out that vue-style-loader and the new css-loader somehow do not work together. Now I use style-loader instead and everything is good.

[Paul Welsh]

@laberning Ahhh, THAT is what the issue was... lots of out of date documentation out there

[bendruitt]

Far out! Extending on from @laberning , every Google result out there chains css-loader with vue-style-loader. This works fine if you use vue-cli-service to build your app and only have one entry point since the vue-cli-service@4.4.6 uses css-loader@3.6.0 (latest npm versions at the time of writing).

However, if you use webpack to build your app directly (you may want to support multiple entry points, for instance, or integrate your Vue project with another project - Vue is progressive, right!?) the latest css-loader is 4.2.0 and this DOES NOT seem to work with vue-style-loader@4.1.2 out of the box. In this case using style-loader instead does indeed do the trick.

If you'd prefer, you can also downgrade your css-loader to 3.6.0

Well, at least I know more about webpack and Vue. 8 hours, later...

Hope this helps someone!

[Ivo Janssen]

I was still using vue-style-loader with the webpack-dev-server in a project. But that caused problems when I updated to css-loader 4.0.
Took me quite a while to figure out that vue-style-loader and the new css-loader somehow do not work together. Now I use style-loader instead and everything is good.

For a workaround for this, see #46

[wei]

After I upgraded the 'css-loader' to 4.2.1, the 'vue-style-loader' failed to work properly, causing the style to fail to load.
I changed my Webpack configuration to replace the 'vue-style-loader' with the 'style-loader@1.2.1' and it worked fine.

    // before
    {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },

    // after
     {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

[Saran Tanpituckpong ✔️]

What's different between style-loader v1 and vue-style-loader now?
Do we still need vue-style-loader for SSR?
Or style-loader can completely replace vue-style-loader?

[wei]

What's different between style-loader v1 and vue-style-loader now?
Do we still need vue-style-loader for SSR?
Or style-loader can completely replace vue-style-loader?

After my project was replaced, it worked normally. You can also add style-loader directly to webpack so I'm not sure if there is a conflict like this:

    {
        test: /\.less$/,
        use: ['vue-style-loader', 'style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'style-loader', 'css-loader']
      },

[Saran Tanpituckpong ✔️]

After my project was replaced, it worked normally. You can also add style-loader directly to webpack

I'm not sure about SSR support in style-loader.
vue-style-loader said the difference from style-loader is Server-Side Rendering Support.

[Yuri Plashenkov]

Unfortunately, the pure style-loader seems doesn't work in SSR mode. We still need vue-style-loader.
Luckily this solution: #46 (comment) works.

P.S. Like many here, spent several hours to figure out why styles aren't being applied.

[tokenwind]

why not loading styling of vue ?,the answer is that vue-style-loader plugins file .babelrc "plugins": ["transform-es2015-modules-commonjs".but in the css-loade https://github.com/webpack-contrib/css-loader#esmodule ,this option means it's ES module. that don't match .so when i change css-loader options :esmodule. It works . When i see style-loader ,i find it's plungins same as css-loader.
中文： vue-style-loader 中配置的ES module-->commonJs, css-loader 中默认设置为 ES module。所以修改下即可。