升级到css-loader 4.0.0时，vue ssr应用程序样式中断

问题描述

问题

我有一个Vue SSR应用程序，当使用css-loader版本3.6.0时，它可以完美呈现样式，但是当我将应用程序更新为css-loader 4.0.0时，我的应用程序中不再具有任何样式。

• 使用css-loader 3.6.0，当我查看应用程序的html页面时，我在HTML文档的“ head”标签中看到了“ style”标签。
• 对于css-loader 4.0.0，当我查看应用程序的html页面时，“样式”标签丢失了

注意：由于我正在执行服务器端渲染，因此未使用Vue CLI创建此项目

有人知道我必须对我的应用程序进行任何更改以升级到最新的css-loader

样式

我的应用程序在每个组件中使用内联样式，但我没有使用任何CSS文件。以下是我的一个组件外观的示例。

<template>
   ....
</template>

<script>
   ....
</script>

<style scoped>
    header {
       css added here
    }
    other styles added here
</script>

依赖项

以下是我的工作依存关系

"dependencies": {
    "core-js": "~3.6.5","dotenv": "~8.2.0","express": "~4.17.1","regenerator-runtime": "~0.13.7","vue": "~2.6.12","vue-router": "~3.4.7","vue-server-renderer": "~2.6.12","vuex": "~3.5.1","vuex-router-sync": "~5.0.0"
  },"devDependencies": {
    "@babel/cli": "~7.12.1","@babel/core": "~7.12.3","@babel/preset-env": "~7.12.1","babel-loader": "~8.1.0","copy-webpack-plugin": "~6.2.1","cross-env": "~7.0.2","css-loader": "~1.0.1","file-loader": "~6.0.0","nodemon": "~2.0.6","npm-run-all": "~4.1.5","vue-loader": "~15.9.5","vue-template-compiler": "~2.6.12","webpack": "~4.44.2","webpack-cli": "~3.3.12","webpack-dev-server": "~3.11.0","webpack-merge": "~4.2.2","webpack-node-externals": "~2.5.2"
  },

Webpack配置

我有3个配置Webpack文件，1个基本文件，1个用于创建客户端捆绑包，1个用于创建服务器捆绑包。在基本配置中，我有以下关于css / vue加载程序的信息

  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  module: {
    rules: [
      {
        test: /\.vue$/,loader: 'vue-loader',options: {
          loaders: {
          },},{
        test: /\.css$/,use: [
          'vue-style-loader','css-loader',],// other loaders
    ],plugins: [
    new VueLoaderPlugin(),// other plugins
  }

解决方法

有关SSR应用的讨论和解决方法：https://github.com/vuejs/vue-style-loader/issues/46#issuecomment-670624576

这也适用于非SSR应用程序，但是在这种情况下，vue样式加载器可以简单地替换为样式加载器：https://github.com/vuejs/vue-style-loader/issues/42#issuecomment-678586075