在 NUXTjs 生成中提取 CSS

Question

使用 nuxt generate 时，我生成了各种 HTML 页面，大小恰好约为 300 kB。文件的大部分是 CSS 内联样式。是否可以将其放入外部文件并减小 HTML 的大小？

Answer 1

您可以使用

将主块中的 CSS 提取到单独的 CSS 文件中

nuxt.config.js

module.exports = {
  build: {
    extractCSS: true
  }
}

这已记录在案 here

如果要全局导入 css 个文件，请使用

module.exports = {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]
}

如文档所述here

在 NUXTjs 生成中提取 CSS

Extract CSS in NUXTjs generate

css

webpack

nuxt.js

generate