Vue 范围样式：webpack 5 和 css-loader 4

问题描述

我正在将 Vue 应用程序升级到 webpack 5 和 css-loader 4（或 5）。我使用带有 <template> 和 <script> 标签的单文件组件。我的一些组件使用范围样式：<style scoped>.

自从升级到 webpack 5 和 css-loader 4 以来，我的 vue 组件中的作用域样式已被 webpack 完全跳过（据我所知）。

我当前的配置如下：

{
  module: {
    rules: [
      // ... other rules omitted here
      {
        test: /\.scss$/,use: [
          'vue-style-loader',{
            loader: 'css-loader',options: { modules: true }
          },'sass-loader'
        ]
      },{
        test: /\.css$/,options: {
              // enable CSS Modules
              modules: {
                // customize generated class names
                localIdentName: '[local]_[hash:base64:8]'
              }
            }
          }
        ]
      },]
  }
  // ... more configuration here
}

我尝试了各种更改：

• 用vue-style-loader替换style-loader
• 在选项中添加 esModule: false
• 将 ident: 'css-loader-ident' 添加到 css-loader 配置（与 options 级别相同）

到目前为止，我还没有获得将样式注入最终标记的 webpack 配置，更不用说特定于 vue 组件的哈希了。

想法？

解决方法

事实证明，解决方案或一种可能的解决方案如下：

{
  module: {
    rules: [
      {
        test: /\.scss$/,use: [
          'style-loader','css-loader','sass-loader'
        ]
      },{
        test: /\.css$/,'css-loader'
        ]
      }
    ]
  }
}

我主要是通过反复试验发现的。欢迎提供有关正在发生的事情/为什么有效的更多信息。