Question

修改

我在Vue中使用Laravel，目前正在使用vue route延迟加载。当我使用npm dev进行编译时，一切正常。但是，当我进行npm生产时，它说我有一个CSS遗漏了分号错误。可以通过不延迟加载所有vue路由来解决。

我的问题是，为什么只有我在使用延迟加载时才会出现这种“缺少的分号”。

我尝试了部分路线的延迟加载，有时它有时起作用，有时却不起作用。

非常感谢任何人遇到此问题并知道如何解决。

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;
    }
}

Answer 1

有时，导入未使用的文件时，在Less中会出现相同的错误。在您的示例中，您导入了variables.scss，但似乎未使用该文件中的任何内容。

尝试删除@import "variables";，问题可能出在该文件或您导入的其他文件中。

当我遇到相同的错误时，是因为我的animations.scss的班级使用了这样的动画：

.blink {
  animation: 1s blink infinite;
}

我只是将动画属性的顺序更改为此，而现在它的构建没有错误。

.blink {
  animation: blink 1s infinite;
}

我无法解释为什么这与“ Missed分号”有关，但是希望它可以帮助某个人。

它总是说我在进行npm运行生产时在CSS中缺少半冒号

1 个答案: