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