Vue项目中使用Stylus无法引入Google Fonts的问题求助

基于你的场景（通过npm link引入本地Stylus组件库），我整理了几个最可能的解决思路，按从易到难的顺序推荐：

1. 直接在HTML中引入Google Fonts（最快捷） #

绕开Stylus和webpack的解析问题，直接在主项目的public/index.html的<head>里添加字体链接：

<link href="https://fonts.googleapis.com/css2?family=你的目标字体:wght@对应权重&display=swap" rel="stylesheet">

这种方式完全不受组件库和Stylus配置的影响，全局生效，适合快速验证和解决问题。

2. 检查组件库中Google Fonts的引入语法 #

确保组件库的Stylus文件里，Google Fonts的引入是标准的远程URL写法：

// 组件库的src/stylus/xxx.styl文件中
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap')

// 同时定义全局字体样式
body
  font-family: 'Roboto', sans-serif

注意必须用url()包裹完整的HTTPS链接，不能省略http/https前缀——否则webpack会把它当成本地文件路径去解析，自然找不到资源。

3. 调整Webpack的Stylus Loader配置，跳过远程URL处理 #

webpack的资源加载器（比如url-loader、file-loader）可能会拦截并试图处理所有URL，包括远程的Google Fonts链接，导致解析失败。你需要在主项目的配置里告诉Stylus loader跳过远程URL的处理：

如果是Vue CLI 3+的项目（vue.config.js）： #

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        url: {
          // 只处理本地资源，跳过HTTP/HTTPS开头的远程URL
          filter: (url) => !url.startsWith('http')
        }
      }
    }
  }
}

如果是旧版Vue Webpack模板（build/webpack.base.conf.js）： #

找到module.rules中处理.vue文件的规则，在stylus-loader的配置里添加url选项：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'stylus-loader',
                options: {
                  url: {
                    filter: (url) => !url.startsWith('http')
                  }
                }
              }
            ]
          }
        }
      }
    ]
  }
}

4. 修正npm link导致的Webpack解析问题 #

因为npm link会创建软链接，webpack可能会把组件库的文件当成主项目的一部分，导致路径解析异常。可以在主项目的webpack配置里强制指定组件库的解析路径：

在vue.config.js中添加：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // 强制webpack从node_modules目录解析你的组件库（即使是link的）
        'snue': path.resolve(__dirname, './node_modules/snue')
      }
    }
  }
}

配置完成后重启开发服务器，让webpack重新解析依赖。

5. 检查是否有CSS Scoped影响 #

如果主项目的<style>标签加了scoped，可能会导致组件库的全局字体样式无法渗透到全局。确保主项目中引入组件库Stylus的<style>标签没有加scoped：

<!-- App.vue -->
<style lang="stylus">
// 这里不要加scoped
@import "~snue/src/stylus/你的样式文件.styl"
</style>

内容的提问来源于stack exchange，提问作者Sneppy