js 怎么提取css,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

}