Vue 范围样式：webpack 5 & css-loader 4答案

【问题标题】：Vue scoped styles: webpack 5 & css-loader 4Vue 范围样式：webpack 5 & css-loader 4
【发布时间】：2021-05-27 07:19:09
【问题描述】：

我正在将 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$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            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-component-specific 哈希了。

想法？

【问题讨论】：

你在使用 Vue CLI 5 吗？
@tony19 不，我不是。这是一个4年左右的vue项目，已经升级了，零碎的，好几次。 :)

标签： vue.js webpack css-loader

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我有相同的设置，多亏了你，我想通了:) 就我而言，我只需要切换加载器的顺序：

{
    test: /\.(sa|sc|c)ss$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
},

【讨论】：