它一直说我在做npm运行生产时，我的css中缺少一个分号。

Question

编辑

我使用Laravel和Vue，目前我使用vue路由懒惰加载。当我用npm编译时，所有的事情都运行得很好。然而，当我做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

有时，当我导入一个未使用的文件时，我会得到同样的错误。在您的示例中，您导入了variables.scss，但是您似乎没有使用该文件中的任何内容。

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

当我得到同样的错误时，这是因为我的animations.scss有一个类使用这样的动画：

.blink {
  animation: 1s blink infinite;
}

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

.blink {
  animation: blink 1s infinite;
}

我无法解释为什么这与“漏掉的分号”有任何关系，但希望它能帮助到外面的人。