无法在 Vue 上使用 Stylus 导入 google 字体

Question

我使用带有 webpack 模板的 Vue 2 创建了一个项目。与此同时，我还在研究我在上面的项目中本地使用的 "component library"（使用 npm link）。

我在两个项目中都使用 Stylus。

现在 App.vue，为了能够自定义库的外观，我从链接包中导入单独的手写笔文件，如下所示：

<template>
    <...>
</template>

<script>
...
</script>

<style lang="stylus">
@import "~snue/src/stylus/vars"
/* 
    Override default variables
 */
fontSans    = "Ubuntu"
fontMono    = "Ubuntu Mono"
fontNumber  = "Dosis"

lighter     = lighten(light, 5)
lightish    = darken(light, 5)
darker      = darken(dark, 5)
darkish     = lighten(dark, 5)
primary     = crimson
secondary   = darkcyan

// Import components and style
@import "~snue/src/stylus/components"
@import "~snue/src/stylus/styles"

// Custom styles
@import url("https://fonts.googleapis.com/css?family=Dosis:400,700");
.f-number
    font-family: fontNumber, Courier New, Courier, monospace

body
html
    margin: 0
    padding: 0

html
    background-color: darkish

body
    background-color: dark
    color: light
</style>

一切正常，除了使用 google 字体的 @import url(...) 规则似乎不起作用。

当我运行 npm run dev 浏览器使用我指定的后备字体时，我无法在 chrome 检查器的网络面板中看到任何请求。

当我使用 webpack 和提取插件构建库时，我可以清楚地看到生成的 css 文件中的 @import url() 规则。

这与某些 Vue 设置有关吗？

Answer 1

原来问题是 postcss-import 抱怨 @import 规则：

@import must precede all other statements (besides @charset)

我恢复到 7.* 版本，现在可以正常使用了。如果您无法切换到旧版本，下面的解决方法最初对我有用。

postccs-import > 11 的解决方法*

这不是真正的解决方案，但我找到了避免此问题的方法：我将 @import 包装在 @css 规则中，现在它起作用了：

// Custom styles
@css
    @import url("https://fonts.googleapis.com/css?family=Dosis:400,700");

令我惊讶的是，我什至可以在 @css 文字块中使用手写笔变量：

// Custom styles
fontNumberSource = replace(" ", "\+", fontNumber)
@css
    @import url("https://fonts.googleapis.com/css?family="+fontNumberSource+":400,700");

所以我现在可以接受这个

无法在 Vue 上使用 Stylus 导入 google 字体

Cannot import google fonts with Stylus on Vue

javascript

webpack

vue.js

vuejs2

stylus

postccs-import > 11 的解决方法*