javascript - 在 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'
   ],
}

在我的个人 View 文件中，我以这种方式导入组件 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 结尾。我正在为此绞尽脑汁。出于测试目的， Assets 位于/static 和/assets 中。

关于我可能做错了什么有什么想法吗？

Answer 1

这在 Assets 案例中对我有用:

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