Vue CLI 3 vue.config.js ошибка компиляции "Неизвестное слово"

Question

Пытаюсь начать работать с приложением Vue CLI 3, которое интегрирует Cesium, но я сталкиваюсь с тем, что, похоже, связано с проблемами конфигурации веб-сайтов. Настройка довольно проста, поэтому я ломаю голову над тем, почему она не работает...

Я получаю ошибку, когда webpack пытается собрать / скомпилировать. Ошибка:

ошибка в./src/components/cesium-map.vue?vue&type=style&index=0&lang=css&

Синтаксическая ошибка: синтаксическая ошибка

(5:1) Неизвестное слово

// загрузить стили var content = require("!!../../node_modules/css-loader/index.js...

Если я удалю <style /> Блок из компонента CesiumMap, приложение собирает / компилирует и запускает.

App.vue

<script>
    import CesiumMap from '@/components/cesium-map.vue'

    export default {
        name: 'app',
        component: {
            CesiumMap
        }
    }

</script>

<template>
    <v-container id="app">
        <v-app dark>
            <CesiumMap />
        </v-app>
    </v-container>
</template>

caesium-map.vue (Компонент)

<script>
    export default {
        name: 'cesium-map',
    }

</script>

<template>
    <v-container id="cesium-map">

    </v-container>
</template>

<style>
    #cesium-map .cesium-viewer-bottom {
        display: none;
    }
</style>

vue.config.js

require('dotenv-flow').config();

const path = require('path');
const webpack = require('webpack');
const copyWebPackPlugin = require('copy-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

const isProd = (process.env.NODE_ENV === 'production');

module.exports = {
    configureWebpack: webpackConfig => {
        let moduleRules = [
            {
                test: /\.css$/,
                use: {
                    !isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
                    'css-loader
                }
            },
            {
                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
                use: ['url-loader']
            }

        ];

        if(isProd) {
            moduleRules.push({
                test: /\.js$/,
                enforce: 'pre',
                include: path.resolve(__dirname, cesiumSource),
                use: [{ 
                    loader: 'strip-pragma-loader',
                    options: {
                        pragma: {
                            debug: false
                        }
                    }
                }]
            })
        }

        return {
            plugins: [
                new miniCssExtractPlugin({
                    filename: "[name].css",
                    chunkFilename: "[id].css"
                }),
                new webpack.ProvidePlugin({
                    '_': 'lodash',
                    'moment': 'moment',
                    'Promise': 'bluebird',
                    'cesium': path.resolve(__dirname, cesiumSource)
                }),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, cesiumWorkers),
                    to: 'Workers'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'Assets'),
                    to: 'Assets'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'Widgets'),
                    to: 'Widgets'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'ThirdParty'),
                    to: 'ThirdParty'
                }]),
                new webpack.DefinePlugin({
                    CESIUM_BASE_URL: JSON.stringify('/')
                })
            ],
            module: {
                rules: moduleRules
            },
            output: {
                sourcePrefix: ''
            },
            amd: {
                toUrlUndefined: true
            },
            resolve: {
                mainFiles: ['index'],
                extensions: ['.js', '.json', '.vue'],
                alias: {
                    'vue$': 'vue/dist/vue.esm.js',
                    'cesium': path.resolve(__dirname, cesiumSource)
                }
            }
        }
    }
}

Как всегда, любая помощь будет принята с благодарностью!

Answer 1

Интересно, что я удалил нижеследующее из правил модуля webpack, и все, похоже, работает правильно для моего варианта использования с Caesium.

{
    test: /\.css$/,
        use: {
            !isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
        'css-loader
    }
}