How to connect VueMaterial styles to webpack?

Question

Vue.js

Good afternoon everyone!
I do according to the manual https://vuematerial.io/getting-started
app.js

import App from './components/App.vue';
import Vue from 'vue';
import {createRouter} from './router'
import store from './store';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'


Vue.mixin({
    beforeMount() {
        const {asyncData} = this.$options;
        if (asyncData) {
            this.dataPromise = asyncData({
                store: this.$store,
                route: this.$route
            })
        }
    }
});
export function createApp (context) {
    const router = createRouter(context);
    Vue.use(VueMaterial);
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    });
    return { app, router }
}

when I build I get

ERROR in ./node_modules/vue-material/dist/vue-material.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

https://pastebin.com/g1ZKpZ9V
here is my package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "yarn run build:client && yarn run build:server",
    "build:client": "cross-env NODE_ENV=development webpack --mode development --config ./webpack.client.config.js --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=development webpack --mode development --config ./webpack.server.config.js --progress --hide-modules"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "css-loader": "^1.0.0",
    "jquery": "^3.1.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.4",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.3.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.16",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.17",
    "vue-template-loader": "^1.0.0",
    "vuex": "^3.0.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-merge": "^4.1.1"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-material": "^1.0.0-beta-10.2",
    "vuex-router-sync": "^5.0.0"
  }
}

вот webpack.base.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");


module.exports = {
    devtool:'#cheap-module-source-map',
    output: {
        path: path.resolve(__dirname, '../../public/test'),
        publicPath: '/public/test/',
        filename: 'js/[name].js'
    },
    resolve: {
        alias: {
            'public': path.resolve(__dirname, '../public')
        }
    },
    plugins:[
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "css/style.css"
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
}

here is App.vue

<template>
    <div id="app">
        <h1 class="h">{{ title }}!</h1>
        <input name="title"  type="text" v-model="title"/>
        <router-view></router-view>
        <router-link :to="{ name: 'Home' }">Home</router-link>
        <router-link :to="{ name: 'Test' }">Test</router-link>
        <h2>Data</h2>
        <pre>{{ data }}</pre>

    </div>
    <md-button class="md-raised">Ripple Off</md-button>
</template>

<script>
    export default {
        data() {
            return {
                data: this.$store.getters.getData,
                title: 'Welcome To My Site!'
            }
        }
    }
</script>

<style lang="css" scoped>
    .h {
        font-size: 72px;
    }
</style>

Answer 1

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

You have duplicated rules for css:
test: /\.css$/ - will work on all files ending in .css
test: /\.(sa|sc|c)ss$/ - will work on all files ending in .sass or . scss or .css
sass-loader - expects sass/scss input, outputs css
css-loader expects css input and outputs
js
In your config, it turns out that js generated by MiniCssExtractPlugin.loader comes to the sass-loader input.
Should help: replace with so that .css files are processed only by their own rule . UPD: it's better to connect vue-material styles via sass, as described here:
https://vuematerial.io/themes/configuration
because most likely you will need theme customization