手写笔语法 - 导入从何而来？答案

【问题标题】：Stylus syntax - where do imports come from?手写笔语法 - 导入从何而来？
【发布时间】：2020-01-28 19:07:05
【问题描述】：

我有一个名为“quasar.styl”的文件：

@import './quasar.variables'
@import '~quasar-styl'

当它被 webpack 处理时，使用 styl-loader，我得到这个错误：

failed to locate @import file ~quasar-styl.styl

我有这种感觉，我不理解手写笔。它会在哪里寻找文件“~quasar-style”？

这个文件来自一个正常工作的样板类 quasar 应用程序，在应用程序目录中的任何地方都没有一个名为 quasar-style 的文件，尤其是 node_modules，我收集波浪号告诉它查找的地方。

有什么想法吗？

更新：我在这里上传了类星体样板项目：https://repl.it/@jmbldwn/Quasar-Boilerplate-2

它不能在 repl.it 上运行，因为它需要 quasar-cli，但你可以在那里看到它生成的所有文件。

【问题讨论】：

这很可能与stylus-loader 有关。我们可以看看那个样板吗？
@jim 有同样的问题，安装 quasar 并替换 vue 生成的 App、Home 等安装完成后它告诉我它找不到 ~qasar-variables-style.styl 和 ~quasar -styl.styl。你已经解决了吗？
我没有找到解决方案。决定表态支持不同的 UI 框架（vuetify），它不依赖于它自己的 CLI。也许我是老派。
我只是在这上面浪费了 2 个小时。晦涩的命名，没有任何解释。

【解决方案1】：

我刚刚解决了这个问题，当我在一个新的克隆中运行 $ npm install，然后是 $ npm update，然后是 $ vue upgrade 时发生了这个问题。

注意：我已经安装了Quasar的Vue CLI Quasar Plugin版本，我的quasar.js配置文件以

开头

import Vue from 'vue';
import '@/styles/quasar.styl';

在您的src/styles/quasar.variables.styl 文件中，删除应该靠近底部的@import '~quasar-variables-styl' 行。
在您的src/styles/quasar.styl 文件中，将@import '~quasar-styl' 行替换为@import '~quasar/dist/quasar.styl'。

【讨论】：

【解决方案2】：

我正在使用 vue3 + vite + quasar 运行后将类星体添加到项目时出现同样的问题

vue add quasar

我只是把这两行注释掉了（可能是vue cli自动添加的，不正确）

在样式/quasar.variables.sass 中

//@import '~quasar-variables-styl'

在styles/quasar.sass中

// @import '~quasar-styl'

然后将 quasar main sass import 添加到 main.js

import "quasar/dist/quasar.sass"

我得到了解决。

【讨论】：