javascript - Nuxt.js:如何将全局 CSS 从样式标签移动到 css 文件

Question

我对 Nuxt.js SCSS 编译感到困惑......
我有 Assets 文件夹，它有两个 SCSS 文件包含在 nuxt.config.js 中:

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~assets/scss/bootstrap.scss',
    '~assets/scss/main.scss'
  ],

发射 npm run build然后 npm run generate ，然后我进入 距离 文件夹并打开 index.html 文件，我看到的是 中的所有 css(而且太大)款式 页面上的标签:

Nuxt.js 已从 Assets 编译 SCSS 文件并将 CSS 放入样式标签中。
如何像这样放入文件并与头部中的链接标签连接？

<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/main.css">

你可能会说我可以使用 头 nuxt.config.js 中的设置，但我不能，因为只有远程和静态文件才有可能，它不能像这样工作:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=0, shrink-to-fit=no' },
    { hid: 'description', name: 'description', content: '' }
  ],
  link: [
    { rel: 'stylesheet', href: '~/assets/scss/bootstrap.scss' },
    { rel: 'stylesheet', href: '~/assets/scss/main.scss' },
    { rel: 'icon', type: 'image/svg+xml', href: '/images/logo.svg' },
  ],
  script: []
},

我没有在 Nuxt.js 文档中找到如何将全局 CSS 放入文件中。是否可以使用 Nuxt.js 配置或仅更改 Webpack 构建配置？请帮助我理解:-)

Answer 1

您可以使用 extractCSS build 选项可将所有 CSS Assets 提取到单独的文件中(通常每个组件一个)，并允许您将每个 CSS 文件放入缓存中:

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}