Question

我使用Vue 2和webpack模板创建了一个项目。与此同时，我还在开发一个＆＃34;组件库＆＃34;我在上面的项目中使用本地语言（使用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(...)规则似乎不起作用这一事实。

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

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

这与某些Vue设置有关吗？

Answer 1

事实证明问题是Traceback (most recent call last): File "test.py", line 403, in a raise ValueError ValueError Traceback (most recent call last): File "test.py", line 410, in b a() File "test.py", line 403, in a raise ValueError ValueError Traceback (most recent call last): File "test.py", line 417, in <module> b() File "test.py", line 410, in b a() File "test.py", line 403, in a raise ValueError ValueError Traceback (most recent call last): File "test.py", line 417, in <module> b() File "test.py", line 410, in b a() File "test.py", line 403, in a raise ValueError ValueError抱怨postcss-import规则：

@import

我又回到版本@import must precede all other statements (besides @charset)，现在它正常工作。如果您无法在下面切换到旧版本，那么这种解决方法最初对我有用。

postccs-import的解决方法＆gt; 11。*

这不是一个真正的解决方案，但我找到了一种避免此问题的方法：我将7.*包裹在@import规则中，现在它可以正常运行：

@css

令我惊讶的是，我甚至可以在// Custom styles @css @import url("https://fonts.googleapis.com/css?family=Dosis:400,700");文字块中使用手写笔变量：

@css

所以我现在对此很好

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

1 个答案:

postccs-import的解决方法＆gt; 11。*