Vue.js 它一直说我在执行npm运行生产时，css中缺少了一个分号

编辑

我正在将Laravel与Vue一起使用，目前我正在使用Vue路由延迟加载。当我使用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

正常（无延迟加载）

延迟加载

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

CssSyntaxError:C:\css\app.css:10972:13:缺少分号

---

有时，当我导入一个未使用的文件时，我会在更少的时间内收到相同的错误。在您的示例中，您导入了

variables.scss

，但似乎没有使用该文件中的任何内容

尝试删除

@import“变量”，问题可能在该文件或您导入的其他文件中

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

.blink {
  animation: 1s blink infinite;
}

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

.blink {
  animation: blink 1s infinite;
}

我无法解释为什么这与“遗漏的分号”有关，但希望它能帮助其他人。
有时我在导入未使用的文件时会在更少的时间内收到相同的错误。在您的示例中，您导入了
variables.scss
，但似乎没有使用该文件中的任何内容

尝试删除
@import“变量”，问题可能在该文件或您导入的其他文件中

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

.blink {
  animation: 1s blink infinite;
}

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

.blink {
  animation: blink 1s infinite;
}

我无法解释为什么这与“缺少分号”有关，但希望它能帮助其他人。
你能添加
app.scss
文件吗？可能是一些打字错误导致了这个问题……这个问题在过去被问过多次。请提供您的css文件以及指定的错误位置dynamic import不起作用ref
如果您的项目大量使用JavaScript动态导入，您可能需要推迟到明年初webpack 5的发布。在此之前，我们无法解决与此相关的已知编译问题。一旦Webpack5发布，Mix将很快更新。如果您不熟悉动态导入，那么这很可能不会影响您的项目。
您可以添加
app.scss
文件吗？可能是一些打字错误导致了这个问题……这个问题在过去被问过多次。请提供您的css文件以及指定的错误位置dynamic import不起作用ref
如果您的项目大量使用JavaScript动态导入，您可能需要推迟到明年初webpack 5的发布。在此之前，我们无法解决与此相关的已知编译问题。一旦Webpack5发布，Mix将很快更新。如果您不熟悉动态导入，那么这很可能不会影响您的项目。