Home

Issue: 996

Compiling and bundling scss - three different ways and three behaviours?

[issue link]

I have all scss in ~/assets/main.scss.

1) Adding it in css in nuxt.config.js:

css: [{ lang: 'scss', src: '~assets/styles/main.scss' }]
css IS NOT autoprefixed

2) Adding it in layout component like this:

<style lang="scss">
  @import "./../assets/styles/main.scss"
</style>

css IS autoprefixed

3) Adding it in layout component via import

<script>
  import '~assets/styles/main.scss'
</script>

css IS NOT autoprefixed AND when page loads initially html does not contain any css (it shows html without css, what a mess) and css rules are “loaded” after ~0.5 sec (for 0.5 sec users sees html without css).


My question is why when I add global css (scss) (point 1) it is not autoprefixed?

This feature request is available on Nuxt.js community (#c864)