How to use postcss syntax inside single file components (.vue files)?

joshukraine
3
joshukraine
commented 2 years ago

Hello,

Just getting started with Nuxt.js, and having some trouble integrating PostCSS plugins.

In particular, I am trying to use the postcss-inline-svg plugin. When I use its syntax within the <style> tags in a Vue component (e.g. pages/index.vue) it is not processed. However, if I use it inside a normal css file (e.g. assets/styles/tailwind.css), it is processed.

So here's my code so far.

postcss.config.js

const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')

module.exports = {
  plugins: [
    require('tailwindcss')(tailwindJS),
    require('postcss-inline-svg'),
    require('autoprefixer')
  ]
}

pages/index.vue

<template lang="pug">
div.coming-soon.w-full.h-screen.bg-cover.bg-black.relative
  div.greeting.border.border-white
</template>

<script>
export default {}
</script>

<style scoped>

...

.greeting {
  background: svg-load("../images/coming-soon.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: content-box;
  height: 200px;
  width: 400px;
}

...

</style>

However, if I cut the greeting class from pages/index.vue and move it to the bottom of assets/styles/tailwind.css then it works fine. My best guess at this point is that css inside components is not being processed through the postcss-loader. I think there is a way to add this in the build section of nuxt.config.js. I've searched this a lot, but so far have not found a solution.

What am I doing wrong? Thanks in advance for any assistance!

Bonus Question

What is the preferred way to add PostCSS plugins in general in a Nuxt app? The Nuxt docs say to put them in nuxt.config.js. However when I researched setting up Tailwind CSS, everyone was requiring it in postcss.config.js. Which is correct/preferred?

1
Informations
Question โ€ข Unresolved
#c7276 - Created 2 years ago