Vue 作用域样式：webpack 5 & css-loader 4

Question

我正在将 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 组件的哈希了。

想法？

Answer 1

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

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

我主要是通过反复试验发现的。欢迎了解有关进展的更多信息on/why。

Answer 2

我有相同的设置，多亏了你，我弄明白了:) 在我的例子中，我只需要切换装载机的顺序：

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

Vue 作用域样式：webpack 5 & css-loader 4

Vue scoped styles: webpack 5 & css-loader 4

webpack

vue.js

css-loader