Nuxt.js: Nuxt generate moves compiled css into <head>

Created on 23 Mar 2018 · 9Comments · Source: nuxt/nuxt.js

I want to use Bootsrap with my own colors, so I've made my ~assets/styles/app.scss:

$primary: yellow;
@import '~bootstrap/scss/bootstrap.scss';

Then I've tried to add this to my nuxt.config.js:

  build: {
    extractCss: true
  },
  css: [
    '~assets/styles/app.scss'
  ]

It's all works great, but when I'm trying to run nuxt generate it pushes all result styles into EACH html page. It's around 145 Kb of extra styles w/o caching.
So how to build css file and include it into head manually?

_{This question is available on Nuxt.js community (#c2695)}

Source

Iworb

Most helpful comment

the different files still have the same inline css in the header when using nuxt-edge to generate static files. And the nuxt-edge didn't generate any css file at all...

TonyLuo on 14 Aug 2018

👍3

All 9 comments

Depending on this comment it should be some vendor common css, isn't it?

Iworb on 23 Mar 2018

Please try to use extractCSS as described here.
This should solve your problem.

manniL on 23 Mar 2018

👍2

I have the same issue, nuxt just embed all complied css into every html head, that makes html very big.
I have try extractCSS, but it doesn't work for me....

nuxt.config.js

module.exports = {
  /*
  ** Router config
  */
  router: {
    middleware: ['check-auth',]
  },
  /*
  ** Headers of the page
  */
  head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  build: {
    extractCSS: {
      allChunks: true
    },


        vendor: ['vuex','iview','axios','@tinymce/tinymce-vue','vue-amap','sockjs-client','webstomp-client']
  },
  /*
  ** Global CSS
  */
  // css: [
  //   'normalize.css',
  //   '~assets/main.css'
  // ],
  plugins: ['~/plugins/layout','~/plugins/vendor'], // https://nuxtjs.org/guide/plugins/
  css: [
    'normalize.css',
    '~assets/main.css',

    // 项目中的 CSS 文件
    '~/assets/styles/iconfont/iconfont.css',
    // 项目中的 Sass 文件
    { src: '~/assets/styles/iview-custom.less', lang: 'less' }, 
    { src: '~/assets/styles/common.less', lang: 'less' }, 
    { src: '~/assets/styles/app.less', lang: 'less' }, 
    { src: '~/assets/styles/animate.less', lang: 'less' }, 
    { src: '~/assets/styles/aurora.css'}, 
  ],
  /*
  ** Environement variables
  */
  env: {
    AUTH0_CLIENT_ID: '',
    AUTH0_CLIENT_DOMAIN: ''
  },
   /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }


    }
  }
};

TonyLuo on 14 Aug 2018

@TonyLuo Which nuxt version are you using?

manniL on 14 Aug 2018

the latest one: "nuxt": "^1.4.2",

TonyLuo on 14 Aug 2018

@TonyLuo As described in the docs:

CSS inside async components will remain inlined as JavaScript strings and handled by vue-style-loader.

If you upgrade to nuxt-edge (upcoming Nuxt 2 build), the default behavior is to extract all css in extra files with webpack4. I'd suggest to try it out.

manniL on 14 Aug 2018

I try nuxt-edge and set build: {extractCSS: true}, but it is still not working.
nuxt still embed all compiled css into every html file header

TonyLuo on 14 Aug 2018

👍1

the different files still have the same inline css in the header when using nuxt-edge to generate static files. And the nuxt-edge didn't generate any css file at all...

TonyLuo on 14 Aug 2018

👍3

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.