无法在 Vue 上使用 Stylus 导入谷歌字体答案

【问题标题】：Cannot import google fonts with Stylus on Vue无法在 Vue 上使用 Stylus 导入谷歌字体
【发布时间】：2018-04-15 10:22:24
【问题描述】：

我使用 Vue 2 和 webpack 模板创建了一个项目。与此同时，我还在开发一个“组件库”，我在上面的项目中本地使用（使用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>

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

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

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

这与某些 Vue 设置有关吗？

【问题讨论】：

尝试使用@require 而不是@import
@DigitalDrifter @require 不能与 url(...) 一起使用，它会抛出错误“您不能 @require url”
由于您在 SFC 中执行此操作，您可能需要适当的加载程序来处理它

标签： javascript webpack vue.js vuejs2 stylus

【解决方案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");

所以我现在可以接受了

【讨论】：