This relative module was not found.

Firstly I am using nuxt with tailwind CSS in a fresh nuxt project. I have sass-loader, node-sass, postcss-loader and style-resources in my package json file. styles-resources is referenced in buildModules inside of the nuxt config file.

When using ‘~/assets/img/hero.jpg’ inside of a style tag in a component like below I get the error shown further down.

<style lang="scss" scoped>
section {
  height: 50vh;
  background-color: grey;
  background-image: url('~/assets/img/hero.jpg');
}
</style>

* ../../../../../../../assets/img/hero.jpg in ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/Hero.vue?vue&type=style&index=0&id=5f57e4d5&lang=scss&scoped=true&

However, when I use an img element with the :src bound to it then it works fine. I would like to use a background image on a class inside of the style tag in a component.

1 possible answer(s) on “This relative module was not found.