nuxt CSS 到獨(dú)立文件
在Nuxt.js中將CSS樣式從單個(gè)文件分離為多個(gè)獨(dú)立的文件可以通過(guò)使用extract-text-webpack-plugin來(lái)完成。

首先，確保已經(jīng)安裝了該插件：

npm install extract-text-webpack-plugin --save-dev

然后，在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為plugins/cssExtractPlugin.js的新文件，并添加如下內(nèi)容：

import ExtractTextPlugin from 'extract-text-webpack-plugin';export default function ({ isClient }) {return [new ExtractTextPlugin({filename: (getPath) => getPath('[name].[contenthash].css'), // 設(shè)置輸出的CSS文件路徑及命名規(guī)則allChunks: true, // 提取所有chunk（包括入口點(diǎn)）的CSSdisable: !isClient // 僅在客戶端構(gòu)建時(shí)生效}),];
}

接下來(lái)，打開(kāi)nuxt.config.js文件，并進(jìn)行相應(yīng)配置修改：

module.exports = {build: {extend(config, ctx) {if (!ctx.isDev && ctx.isClient) {config.plugins.push(...require('./plugins/cssExtractPlugin')());}},},
};

最后，重新運(yùn)行Nuxt.js服務(wù)器或者編譯前端靜態(tài)文件，就會(huì)自動(dòng)將CSS樣式從主要的JavaScript文件中分離出來(lái)，存放于獨(dú)立的.css文件中。