nuxt.js 提取css 到 link的方法

说明:有时候咱们不想让css和html代码浑在一块儿,提升SEO,或出于其余缘由想把nuxt.js 的css分离出来,其实挺简单的。

特此记录,与君共勉css

正题

下面这张图片就是提取以后的样子,全部css 都放到了/nuxt/app.XXX.css中了。html

20191128143649.png

功能实现:

重要的事情说三遍,那就是在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }这句话。稍后具体说明;

20191128143731.png

有的盆友会发现,npm run dev 后没有任何变化,不要着急,试下npm run build; npm start;这样必定成功了吧;(只有生产环境下有效)webpack

原理git

在文档中有提到webpack的配(https://github.com/nuxt/nuxt....);github

打开链接你会发现,有这样两个js:“base.config.js”,“style-loader.js”;web

20191128144017.png

20191128143903.png

其实nuxt.js 本身自己已经集成了extract-text-webpack-plugin这个插件;
只是extractCSS默认为false;npm

相关文章
相关标签/搜索