Webpack Can'；调试网页包SCS

我正在使用模板构建一个带有Vue和Webpack的framework 7应用程序：

我已将所有内容设置为运行，但当我尝试检查某个元素时，我得到以下结果：

这是我的网页：

const path = require('path'),
fs = require('fs'),

webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CordovaHtmlOutputPlugin = require('./webpack/plugins/CordovaHtmlOutputPlugin.js'),
UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
CleanPlugin = require('clean-webpack-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),

entryFile = path.join(__dirname, 'src/main.js'),
devServerPort = 8081

let config = function (env) {
let returner = {
entry: entryFile,

resolve: {
  extensions: ['.js', '.json', '.vue'],
  modules: [path.join(__dirname, 'src'), 'node_modules'],
  alias: {
    'vue$': 'vue/dist/vue.common.js',
    'src': path.resolve(__dirname, 'src/'),
    'assets': path.resolve(__dirname, 'src/assets/'),
    'pages': path.resolve(__dirname, 'src/assets/vue/pages/'),
    'components': path.resolve(__dirname, 'src/assets/vue/components/')
  }
},

output: {
  pathinfo: true,
  devtoolLineToLine: true,
  filename: '[hash].[name].js',
  sourceMapFilename: "[hash].[name].js.map",
  path: path.join(__dirname, 'www')
},

module: {
  rules: [
    {test: /\.(png|jpe?g|gif)$/, loader: 'file-loader', options: {name: '[name].[ext]?[hash]'}},
    {test: /\.(woff2?|eot|ttf|otf|mp3|wav)(\?.*)?$/, loader: 'file-loader', options: {name: '[name].[ext]?[hash]'}},
    {test: /\.svg$/, loader: 'url-loader'},
    {test: /\.scss$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader']},
    {test: /\.sass$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']},
    {test: /\.vue$/, loader: 'vue-loader'}
  ]
},

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify((env && typeof env !== "undefined" && env.release) ? 'production' : 'development')
    }
  }),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    inject: true,
    minify: {
      removeComments: true,
      removeScriptTypeAttributes: true,
      removeAttributeQuotes: true,
      useShortDoctype: true,
      decodeEntities: true,
      collapseWhitespace: true,
      minifyCSS: true
    }
  })
]
}

if (typeof env === 'undefined' || typeof env.devserver === 'undefined') {
returner.plugins.push(new CordovaHtmlOutputPlugin())
returner.plugins.push(new ExtractTextPlugin("styles.css"))
returner.module.rules.push({
  test: /\.css$/, use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
})
}

if (env) {
if (typeof env.devserver !== 'undefined' && env.devserver) {
  returner.module.rules.push({
    test: /\.css$/, loader: ['style-loader', 'css-loader']
  })
  returner.entry = [
    entryFile,
    path.resolve(__dirname, "webpack/dev_helpers/CordovaDeviceRouter.js")
  ]
  returner.output.publicPath = "/"
  returner.devtool = "eval"
  returner.devServer = {
    contentBase: path.join(__dirname, "www"),
    port: devServerPort,
    stats: {colors: true},
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    host: "0.0.0.0"
  }
  returner.plugins.push(new webpack.NamedModulesPlugin())
} else if (typeof env.release !== 'undefined' && env.release) {
  returner.plugins.push(new CleanPlugin("www", {
    root: path.join(__dirname, "."),
    dry: false,
    verbose: false,
    exclude: ["index.html"]
  }))
  returner.plugins.push(new UglifyJsPlugin())
}
}

return returner
}

module.exports = config

在my main.js中，我导入我的SCS：

import appStyles from './assets/sass/main.scss'

---

我真的不太了解这个网页，因为这是我第一次使用它。如何生成映射以检查元素？

只是为了确定：您是否尝试将sourcemaps选项添加到extract text使用的css加载程序中？基本上我上面有我的整个文件。我对网页包真的不太了解。