vue.js - Vue webpack encore sass 源图无法正常工作

Question

我正在开发一个与 webpack 集成的 Vue 项目（没有 Vue CLI）。在功能方面一切正常。但是，当我从任何页面跟踪/调试样式时，chrome devtools 会显示给我App.vue?vue&type=style&index=0&lang=scss&，而不是显示实际的 scss 文件（例如`user-profile.scss）代码。

例如，

我想查看该scss特定代码的文件（例如，user-profile.scss而不是App.vue?vue&type=style&index=0&lang=scss）。

但是，我可以看到引导scss文件正在正确显示，

只是scss我项目的所有文件在 chrome 检查器中显示为单个文件。我能够调试组件、模块文件等，但只有源映射的 scss/css 部分似乎无法正常工作。

这是我的 webpack 配置，

Encore
  .setOutputPath('public/build/')
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableVersioning(Encore.isProduction())
  .configureBabel(() => {
  }, {
    useBuiltIns: 'usage',
    corejs: 3
  })
  .enableVueLoader()
  .enableSassLoader()
  .enableSourceMaps(!Encore.isProduction())
  .disableSingleRuntimeChunk()
  .addEntry('app', './assets/js/app.js')
  .configureFilenames(setFilenames)
;

在App.vue我正在导入一个文件 ( assets/sass/index) 中，该文件为该文件中的不同页面导入不同的样式。前任App.vue

<style lang="scss">
  @import './assets/sass/index';
</style>

我错过了什么吗？谢谢

注意：我在 chrome 开发工具设置中启用了 sourcemap

标签： vue.jswebpacksasssource-mapswebpack-encore