Nuxt.js将页面中css样式提取到一个css文件中

看下未提取的css的部分源码

实现将页面中css 提取到 link的方法比较简单：在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }即可。

build: {
    extractCSS: { allChunks: true },
}

注意：npm run dev 启动项目后是没有任何变化，要先运行npm run build，在运行 npm start，就能成功了吧。（只有生产环境下有效）

优化后的代码：

原理

打开链接文档中有提到webpack的配（https://github.com/nuxt/nuxt.js/tree/master/lib/builder/webpack）

base.config.js

  // CSS extraction
  const extractCSS = this.options.build.extractCSS
  if (extractCSS) {
    const extractOptions = Object.assign(
      { filename: this.getFileName('css') },
      typeof extractCSS === 'object' ? extractCSS : {}
    )
    config.plugins.push(new ExtractTextPlugin(extractOptions))
  }

style-loader.js

// -- With extractCSS --
  // TODO: Temporary disabled in dev mode for fixing source maps
  // (We need `source-map` devtool for *.css modules)
  if (this.options.build.extractCSS && !this.options.dev) {
    // ExtractTextPlugin
    // https://github.com/webpack-contrib/extract-text-webpack-plugin
    const extractLoader = ExtractTextPlugin.extract({
      use: loaders,
      fallback: vueStyleLoader
    })

    // css-hot-loader
    // https://github.com/shepherdwind/css-hot-loader
    const hotLoader = {
      loader: 'css-hot-loader',
      options: { sourceMap }
    }

    return this.options.dev ? [hotLoader].concat(extractLoader) : extractLoader
  }