Question

我试图在我的laravel项目中使用Vuetify作为前端框架。我正在使用yarn安装vue和vuetify。

然后，我尝试使用vuetify的predefined layout作为我的layout组件。在我的第一次尝试中，我成功配置了它。但是，当我尝试根据自己的要求对其进行自定义时，使用yarn run dev构建代码时会出错吗？

这是我的 app.js 文件。

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import Notification from 'vue-notification';
import VueProgressBar from 'vue-progressbar';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'


Vue.use(Notification);
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history'
});
const options = {
    color: '#16e9ff',
    failedColor: '#ff6761',
    thickness: '4px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
};

Vue.use(VueProgressBar, options);
Vue.use(Vuetify, {
    theme: {
        "primary": "#00bcd4",
        "secondary": "#424242",
        "accent": "#82B1FF",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FFC107"
    }
});


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('home-component', require('./components/HomeComponent.vue'));
Vue.component('layout',require('./components/layout/Layout.vue'));

const app = new Vue({
    el: '#app',
    router,
});

这是我的app.sass文件。

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';


.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

这是我的webpack.mix.js文件

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

最后是我得到的。

ERROR in ./node_modules/vuetify/src/stylus/components/_tooltips.styl
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '../bootstrap'
| 
| .v-tooltip
 @ ./node_modules/vuetify/lib/components/VTooltip/VTooltip.js 3:0-55
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread
",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/layout/Layout.vue
 @ ./resources/assets/js/components/layout/Layout.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yachitha Sandaruwan\AppData\Roaming\npm-cache\_logs\2018-10-24T15_00_36_231Z-debug.log
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我需要知道我的配置出了什么问题吗？
如果有人可以解释有关 loaders （css-loader，vue-loader，sass-loader）的信息可能会有所帮助？

如果有人通过laravel使用vuetify预定义布局，请帮助我解决这个问题。

如何在laravel 5.6中使用Vuetify-predefine布局？

0 个答案: