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

Question

我试图将某些组件 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 中。

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

Answer 1

这在资产情况下对我有用：

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

Answer 2

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

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

就我而言，我导入了图像并将其传递到data. 这意味着backgroundLocation解决了类似的问题/_nuxt/img/....。然后你需要添加url()css 函数。