nuxt.config.jsにextractCSSを追加する

nuxt.config.js

export default {
  build: {
    /*
     ** You can extend webpack config here
     */
    extend() {},
    extractCSS: true /* 追加 */
  }
}

Nuxt.jsのnuxt.config.jsファイルにextractCSS: trueを追記します。（デフォルトではfalse）

上記の設定でJSとCSSを別ファイルで出力することができます。

出力するファイル名やディレクトリを指定する

出力するファイル名やディレクトリを指定することもできます。

nuxt.config.js

export default {
  build: {
    extend() {},
    extractCSS: true,
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
      css: ({ isDev }) => (isDev ? '[name].css' : 'css/[contenthash:7].css')
    }
  }
}

https://nuxtjs.org/docs/configuration-glossary/configuration-build/#filenames

出力するファイル名を固定にする

nuxt.config.js

export default {
  build: {
    extend() {},
    extractCSS: true,
    filenames: {
      app: () => '[name].js',
      chunk: () => '[name].js',
      css: () => '[name].css'
    }
  }
}

固定のファイル名にした場合は、ブラウザにキャッシュされて変更を検出できない可能性があるので注意が必要になります。

参考