Loading scss in every vue files has a **HUGE** impact on the build size

[syffs]

Overview of the problem

• Nodejs version: v8.9.1
• Nuxtjs version: v1.4.0
• nuxt-sass-resources-loader version: v1.2.0

Description

as in title:

• with only css declaration in module

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets: 
  img/fontawesome-webfont.912ec66.svg (444 kB)
  vendor.c78f3b3ef86274eb1f75.js (469 kB)
Hash: e57da3f13e4ff0f857db
Version: webpack 3.11.0
Time: 11772ms
             Asset    Size  Chunks             Chunk Names
server-bundle.json  852 kB          [emitted]  

• with nuxt-sass-resources-loader

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets: 
  img/fontawesome-webfont.912ec66.svg (444 kB)
  pages/login.7152ea6e3f76a75d123b.js (1.01 MB)
  pages/prod/1.c5fc8a3955a035273d67.js (317 kB)
  pages/prod/index.cc4757662c1059d404b7.js (610 kB)
  layouts/default.1525a4efc9629ebdac34.js (610 kB)
  pages/prod/2.79f5ee8e772498068828.js (317 kB)
  layouts/prod.d671a56fc9ec03fc1f2c.js (359 kB)
  vendor.c78f3b3ef86274eb1f75.js (469 kB)
Hash: 1b4de98ae4b2d9c3d4ac
Version: webpack 3.11.0
Time: 53889ms
             Asset     Size  Chunks             Chunk Names
server-bundle.json  4.41 MB          [emitted]  
  nuxt:build Building done +2m

[lucpotage]

I think the purpose of this module is to use variables, functions and mixins of a framework that don't directly output style.

Example:

$color-gray: #f2f2f2;

@mixin card {
  .card {
    ...
  }
}

This won't produce any code unless you write @include card in your style.

If you need to include a Sass library, you can use the default Nuxt.js css property:

export default = {
 css: {
   '~/assets/lib.scss'
 }
}

Then your selectors and style won't be replicated in each Vue file. Tell me if this helped you.

[anteriovieira]

Thanks @lucpotage