使用 quasar 引用 app.sass 中的静态文件答案

【问题标题】：Reference statics file in app.sass with quasar使用 quasar 引用 app.sass 中的静态文件
【发布时间】：2020-04-12 08:13:35
【问题描述】：

我是新来的，所以如果我错过了什么，我很抱歉。

我的问题如下：我将背景图像设置为具有已定义类的 div。图像在 sass 文件中定义。

如果我像这样添加静态路径，它对开发人员有用：

.iconGrey
  background:url('/statics/icon/grey.svg')
  background-size: 18px 24px !important
  background-repeat: no-repeat

如果我现在将它发布到名为 test 的子文件夹中，则 / 将解析为 //myurl/statics 而不是 //myurl/test/statics

我已经尝试了所有找到的方法，但 quasar 总是给我以下错误：

未找到此依赖项：

statics/icon/grey.svg in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-2-1!./node_modules/postcss-loader/src??ref- -8-oneOf-2-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader. quasar-sass-variables.js!./src/css/app.sass

我试过了：

~/statics/
~静态/
~@statics/

以及添加引号、删除引号、使用单引号...

所以...我错过了什么？任何帮助表示赞赏。

谢谢

【问题讨论】：

为什么要在子文件夹中发布？
你解决了吗？对于引用background-image: url("/statics/textures/texture2.png"); 的android 应用程序，我在DEV 中使用Quasar/Cordova 时遇到了同样的问题。使用background-image: url("statics/textures/texture2.png"); 或background-image: url("~statics/textures/texture2.png"); 会产生编译错误This relative module was not found 或This dependency was not found

标签： webpack sass quasar-framework quasar

【解决方案1】：

我在构建 Android 应用时遇到了同样的问题。

我尝试了以下方法，在构建和安装适用于 Android 的 APK 文件时，它在 DEV 和 PROD 中都有效

background-image: url("../statics/textures/texture2.png");

我在显示静态文件夹中的图像时遇到了同样的问题。
为了能够看到我必须使用的图像

<img src="../statics/icons/icon-72.png" />

这适用于我在 DEV 和 PROD 中运行应用程序时。

在documentation中没有看到这个
要么我做错了，但它仍然对我有用。

【讨论】：

【解决方案2】：

我有几个解决方案：

在类星体中你可以使用 require 来举例：

在模板 ':src' 中使用 es6 语法可以帮助您在 html 中执行 javascript 并生成文字字符串。

img 标签版本：

 <img :src="require('your/file/location')" />
 <img :src="`${yourRequireVariable}`" />

您还可以在 Pascal Case 中使用背景语法：

 <div :style="{ backgroundImage: `${yourRequireVariable}` }" ></div>

【讨论】：

require 是您在根目录中启动的项目的相对路径