Он постоянно говорит, что мне не хватает точки с запятой в моем css при выполнении npm run production

Question

Редактировать

Я использую Laravel с Vue, и в настоящее время я использую vue route lazy loading. Все работает нормально, когда я компилирую с npm dev. Однако, когда я делал npm, он говорит, что у меня ошибка с пропущенной точкой с запятой в CSS. Это может быть решено НЕ ленивой загрузкой всего маршрута.

У меня вопрос, почему эта "пропущенная точка с запятой" возникает, когда только я использую отложенную загрузку.

Я пробовал лениво загружать часть своего маршрута, и иногда это работает, иногда нет.

Очень признателен, если кто-то сталкивался с этой проблемой и знает, как ее решить.

Webpack.mix

mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.sass("resources/sass/system.scss", "public/css");

.barbelrc
{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

route.js

Обычный (без ленивой нагрузки)

import appPanel from "./components/application/Base.vue";

Ленивая загрузка

let appPanel = () => import("./components/application/Base.vue");

CssSyntaxError: C: \ css \ app.css: 10972: 13: пропущена точка с запятой

Added the SCSS file
// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~toastr/toastr.scss";

html,
body {
    min-height: 100%;
    @media (max-width: 991px) {
        background-color: transparent;
    }
}
.cursor-pointer {
    cursor: pointer;
}

.line-break {
    white-space: pre-line;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a,
a:hover,
a:active {
    text-decoration: none;
    color: inherit;
}

.shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.table {
    white-space: nowrap;
}

.border-1 {
    border: 2px solid;
}
.border-2 {
    border: 4px solid;
}
.border-3 {
    border: 6px solid;
}
.border-4 {
    border: 8px solid;
}
.border-5 {
    border: 10px solid;
}

.rounded-top-2 {
    border-radius: 50px 50px 0 0;
}
.icon_wrapper {
    max-width: 20px;
}

@media (max-width: 991px) {
    .form-control {
        font-size: 16px;
    }
    .mobile-no-border {
        border: none !important;
    }
    .mobile-no-px {
        padding-left: 0;
        padding-right: 0;
    }
}