search

nuxt-community / adonuxt-template

[Deprecated] Starter template for Nuxt.js with AdonisJS.
451 stars 61 forks source link

Production build injects global CSS onto page instead of file #122

Closed vintprox closed 5 years ago

vintprox commented 5 years ago

I'm not sure if it's intended behavior, but when I run production build, CSS contents (<style data-vue-ssr-id="a473c1a4:0 17cfdfa9:0 40238fea:0">...</style>) are appended to <head> - no matter what this section of Nuxt Guide tells us.

Expected

I expected that global CSS being injected into final file like styles.css, so that it could be just referred on any page (automatically) and everybody would benefit from caching.

Test

$ npm i -D tailwindcss

config/nuxt.js

<...>

module.exports = {
  <...>
  /*
  ** Global CSS
  */
  css: [
    { src: '~assets/sass/app.sass', lang: 'sass' }
  ],
  <...>
  build: {
    postcss: {
      plugins: {
        'tailwindcss': {}
      }
    }
  }
}

resources/sass/app.sass

@tailwind preflight
@tailwind components
@tailwind utilities

Tailwind CSS was compiled succesfully for my surprise, that let me see it in action with Adonuxt. Unfortunately injecting same stuff for every page makes production build bloated. Can we fix this?

This question is available on Nuxt community (#c99)
ghost commented 5 years ago

This issue as been imported as question since it does not respect adonuxt-template issue template. Only bug reports and feature requests stays open to reduce maintainers workload. If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically. Your question is available at https://cmty.app/nuxt/adonuxt-template/issues/c99.