在 Nuxt.js 中解析外部 SCSS 文件中的图像路径答案

【问题标题】：Resolving image paths in external SCSS files in Nuxt.js在 Nuxt.js 中解析外部 SCSS 文件中的图像路径
【发布时间】：2018-05-23 03:44:17
【问题描述】：

我试图将某些组件 scss 文件与其 Vue 组件分开。同时，我还包括一个 GLOBAL scss 文件，它不会被限定。无论我使用哪些文件，我都无法正确解析 /assets 或 /static 图像路径。

我的 nuxt.config.js 示例：

module.exports = {
   css: [
      // SCSS file in the project
      '@/assets/scss/base.scss'
   ],
}

在我的个人视图文件中，我以这种方式导入组件 scss 文件：

<style lang="scss">
   @import "../assets/scss/pages/home";
</style>

无论我加载哪种方式，我都无法解析 scss 中的以下路径：

.myClass {
  background-image: url('~assets/img/my-image.jpg');
}

或

.myClass {
  background-image: url('~static/img/my-image.jpg');
}

或

.myClass {
  background-image: url('/img/my-image.jpg');
}

所有这些都以 404 结尾。我正在为此绞尽脑汁。为了测试，资产在 /static 和 /assets 中。

关于我可能做错的任何想法？

【问题讨论】：

我认为这肯定会有所帮助：stackoverflow.com/a/940475/1971378。它相对于 CSS 文件 & ！文件。
@82Tuskers - 是的，我知道 CSS 中如何处理相对路径。这是一个 Nuxt / Webpack 相关问题，无论我将图像放在哪里，直接使用来自 Nuxt 的示例代码，我都没有得到适当的资产服务。 ~ 是由构建过程处理的符号，传统上所有的 css 都内联在头部。
试试~/assets/my-image.jpg?
试试background: url("./assets/my-image.jpg");

【解决方案1】：

这在资产案例中对我有用：

.myClass {
  background-image: url('~@/assets/img/my-image.jpg');
}

【讨论】：

【解决方案2】：

虽然我无法解决 CSS 中的问题，但我可以通过直接在元素上设置 style 属性来使其工作

:style="{'background-image': `url(${backgroundLocation})`}

在我的例子中，我导入了图像并将其传递给data 中的模板。这意味着backgroundLocation 解析为/_nuxt/img/....。然后你需要预先添加url() css 函数。

【讨论】：