Как подключить стили VueMaterial, к webpack?

Всем добрый день!
Делаю по мануалу 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 }
}


при билде получаю
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

вот мой 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({})
        ]
    }
}

вот 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>
  • Вопрос задан
  • 570 просмотров
Решения вопроса 1
bingo347
@bingo347
Crazy on performance...
{
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }

У Вас для css правила продублированы:
test: /\.css$/ - отработает на всех файлах оканчивающихся на .css
test: /\.(sa|sc|c)ss$/ - отработает на всех файлах оканчивающихся на .sass или .scss или .css

sass-loader - ожидает на вход sass/scss, выдает css
css-loader ожидает на вход css а выдает js
MiniCssExtractPlugin.loader ожидает на вход js подобный выдаче css-loader и отдает js (+ добавляет child - css bundle)

В Вашем же конфиге получается, что на вход sass-loader приходит js сгенерированный MiniCssExtractPlugin.loader

Должно помочь:
test: /\.(sa|sc|c)ss$/ заменяем на test: /\.(sa|sc)ss$/
дабы .css файлы обрабатывались только своим правилом

UPD: лучше подключать стили vue-material через sass, как это описано здесь:
https://vuematerial.io/themes/configuration
ибо скорее-всего Вам понадобится кастомизация темы
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы