webpack - Laravel Mix LESS 编译在 Google 字体导入时失败

Question

我有一些 LESS 文件想要用 Laravel Mix 编译。然而，它在导入 Google 字体时崩溃了。

此导入:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Karla:400,700);
@import url(https://fonts.googleapis.com/css?family=Rancho);

失败并显示此消息:

ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--4-4!./resources/less/adminto.less
Module build failed: 

@import url(https://fonts.googleapis.com/css?family=Karla:400,700);
@import url(https://fonts.googleapis.com/css?family=Rancho);

有什么建议吗？

Answer 1

这是解决方案。

@import (css) url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700)
@import (css) url(https://fonts.googleapis.com/css?family=Karla:400,700)
@import (css) url(https://fonts.googleapis.com/css?family=Rancho)

此外，在您的 webpack.mix.js 文件中，不要忘记引用您的 LESS 源和目标。

mix.less('resources/less/app.less', 'public/css/');

然后尝试运行 npm 命令 npm run dev 、 npm run watch 或 npm run prod

希望这有帮助