小编rad*_*tic的帖子

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

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

我有一个一直在页面中使用的标头组件，由于它们在页面更改时被破坏，我决定将组件向上移动到布局中，以便在路线更改期间，它会持续存在（并且我可以相应地进行动画/转换） ）。我正在使用 VueX 更新标头的内容（图像、副本等）。

现在，我在所有页面中使用异步获取来对商店进行适当的调用（以更新或隐藏标头）。

我希望最终将提取移动到 mixin 中并将其导入到每个页面，而不是手动将其放置在每个页面中。问题是，我想在调用之前使用 mixin 检索一些页面特定数据。我总是可以在 mixin 中默认它，但是当涉及到从页面内覆盖时 - 我无法从 fetch() 访问页面 data() 或 asyncData() 。

在 fetch() 中访问页面特定数据的最佳方法是什么？

我的混音：

export default {
  data() {
     return {
        masthead: false
     }
  },
  async fetch({ state }) {
    await state.commit('masthead/UPDATE_MASTHEAD', this.masthead);
  }
}

在页面中：从“~/mixins/masthead”导入标头

export default {
  name: 'homepage',
  mixins: [masthead]
  data() {
     // Why can't I access this in fetch
     return {
       masthead: true
     };
  },
  asyncData() {
     // Why can't I access this in fetch?
     return …