Webpack 4，vuejs，mini-css-extract-plugin，sass-loader，源图问题

Question

嗨，

我尝试通过我的vue应用在我的样式中（style.css中）编译全局文件。我们将SASS（scss）与Webpack 4一起使用。

问题： 用我实际的conf生成的源映射完全错误！我尝试使用webpack的SourceMapDevToolPlugin对此进行路径设置。 请参阅下面的我的webpack conf：

const webpack = require('webpack');
const path = require('path');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const SassLintPlugin = require('sass-lint-webpack')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                include: [path.resolve(__dirname, 'src')],
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                ),
                loader: 'babel-loader',
                options: {
                    plugins: ['syntax-dynamic-import'],
                },
                test: /\.js$/
            },
            /*{
                test: /\.css$/,
                use: [
                    /*{
                        loader: MiniCssExtractPlugin.loader
                    },*
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ],

            },*/
            {
                test: /\.scss$/,
                exclude : /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                    },

                ]
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|ttf)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    // publicPath: 'assets/',
                    context: 'src'
                }
            }
        ]
    },

    plugins: [
        new VueLoaderPlugin(),
        (process.env.WEBPACK_TARGET === 'client') ? new VueSSRClientPlugin(): new VueSSRServerPlugin(),
        // new SassLintPlugin() // no verbose - lint 
        new MiniCssExtractPlugin({
            filename: 'css/style.css'
        }),
        new webpack.SourceMapDevToolPlugin({
            filename: "[file].map",
            exclude: ["/vendor/"],
            append: "//# sourceMappingURL=[url]",
            moduleFilenameTemplate: '[resource-path]',
            fallbackModuleFilenameTemplate: '[resource-path]',
            noSources: false,
            module: true
        }),
        // new CleanWebpackPlugin(['dist']),
        // new ManifestPlugin()
    ],

    entry: {
        app: process.env.WEBPACK_ENTRY,
        //entrysass: './src/sass/global.scss',
    },

    output: {
        filename: 'js/[name].[chunkhash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        //libraryTarget: (process.env.WEBPACK_TARGET === 'node') ? 'commonjs2' : undefined
        libraryTarget: 'commonjs2'
    },

    resolve: {
        alias: {
            'assets': path.resolve(__dirname, './src/assets'),
            // 'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src')
        },
        extensions: ['.ts', '.vue', '.js', '.scss']
    },

    mode: (process.env.NODE_ENV === 'prod') ? 'production' : 'development',


    // target: (process.env.WEBPACK_TARGET === 'node') ? process.env.WEBPACK_TARGET : 'web',
    target: 'node',
    // node: (process.env.WEBPACK_TARGET === 'node') ? undefined : false,

    // For bundle renderer source map support
    devtool: 'cheap-module-source-map',

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    priority: -10,
                    test: /[\\/]node_modules[\\/]/
                },
                styles: {
                    name: 'styles',
                    test: /\.s?css$/,
                    chunks: 'all',
                    minChunks: 1,
                },
            },

            //chunks: 'async',
            minChunks: 1,
            //minSize: 30000,
            name: true
        }
    }
};

从App.vue的{​​{1}}个组件中导入我的样式，例如：

/src

（PS：如果您有更好的导入样式的方式，我会提供任何提示或技巧） （PS2：Webpack和Vue-ssr-render多次以预取样式和js导入，但我无法解决该问题？）

感谢您的回答：）