Лучшие практики для добавления шаблона администратора на основе vue js в приложение laravel

Question

Нашел панель администратора vue js https://github.com/PanJiaChen/vue-element-admin, и хотел использовать ее в моем новом приложении на основе laravel.

Поскольку структура административной панели администратора и приложений laravel различаются, не уверен, чтолучший способ справиться с такими задачами.

Пытался поместить файлы scss, js в каталог ресурсов laravel, но столкнулся с неверно заданными путями, проблемами с загрузкой scss с использованием смеси laravel, для чего ни одно из предложенных решений не было 'у меня не получилось.

мой файл package.json выглядит как

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "axios": "0.18.0",
        "clipboard": "2.0.4",
        "codemirror": "5.45.0",
        "driver.js": "0.9.5",
        "dropzone": "5.5.1",
        "echarts": "4.2.1",
        "element-ui": "2.7.0",
        "file-saver": "2.0.1",
        "js-cookie": "2.2.0",
        "jsonlint": "1.6.3",
        "jszip": "3.2.1",
        "normalize.css": "7.0.0",
        "nprogress": "0.2.0",
        "path-to-regexp": "2.4.0",
        "screenfull": "4.2.0",
        "showdown": "1.9.0",
        "sortablejs": "1.8.4",
        "tui-editor": "1.3.3",
        "vue": "2.6.10",
        "vue-count-to": "1.0.13",
        "vue-router": "3.0.2",
        "vue-splitpane": "1.0.4",
        "vuedraggable": "2.20.0",
        "vuex": "3.1.0",
        "xlsx": "0.14.1",
        "assets-webpack-plugin": "^3.9.6",
        "babel-preset-es2015": "^6.24.1",
        "bootstrap-sass": "^3.3.7",
        "fast-sass-loader": "^1.4.5"
    },
    "devDependencies": {
        "@babel/core": "7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/register": "7.0.0",
        "@vue/cli-plugin-babel": "3.5.3",
        "@vue/cli-plugin-eslint": "3.5.1",
        "@vue/cli-plugin-unit-jest": "^3.7.0",
        "@vue/cli-service": "3.5.3",
        "@vue/test-utils": "1.0.0-beta.29",
        "autoprefixer": "^9.5.1",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "10.0.1",
        "babel-jest": "23.6.0",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.0.0",
        "chalk": "2.4.2",
        "chokidar": "2.1.5",
        "connect": "3.6.6",
        "cross-env": "^5.1",
        "css-loader": "^2.1.1",
        "eslint": "5.15.3",
        "eslint-plugin-vue": "5.2.2",
        "fuse.js": "3.4.4",
        "html-webpack-plugin": "3.2.0",
        "husky": "1.3.1",
        "jquery": "^3.2",
        "laravel-mix": "3.*",
        "lint-staged": "8.1.5",
        "lodash": "^4.17.5",
        "mockjs": "1.0.1-beta3",
        "node-sass": "^4.12.0",
        "plop": "2.3.0",
        "popper.js": "^1.12",
        "postcss-loader": "^3.0.0",
        "resolve-url-loader": "^2.3.1",
        "runjs": "^4.3.2",
        "sass": "^1.15.3",
        "sass-loader": "^7.1.0",
        "script-ext-html-webpack-plugin": "2.1.3",
        "script-loader": "0.7.2",
        "serve-static": "^1.13.2",
        "style-loader": "^0.23.1",
        "svg-sprite-loader": "4.1.3",
        "svgo": "1.2.0",
        "vue-resource": "^1.5.1",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^3.12.0",
        "webpack-assets-manifest": "^1.0.0",
        "webpack-build-notifier": "^0.1.28",
        "webpack-bundle-analyzer": "^2.13.1",
        "webpack-clean-obsolete-chunks": "^0.4.0",
        "webpack-cleanup-plugin": "^0.5.1",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.4"
    }
}

, а мой файл app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

Эта конкретная ошибка, которую я не смогрешен

ОШИБКА в ./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./node_modules/style-loader!./node_modules/css-loader / dist / cjs.js! ./ node_modules / sass-loader / lib / loader.js! ./ node_modules / postcss-loader / src! ./ resources / sass / app.scss