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

Question

我对 Nuxt.js SCSS 编译感到困惑......我有资产文件夹，其中包含两个 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，然后我进入dist文件夹并打开index.html文件，我看到的是页面上style标签内的所有css（而且太大了）：

Nuxt.js 已经从资产中编译了 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构建选项将所有 CSS 资产提取到单独的文件中（通常每个组件一个），并允许您将每个 CSS 文件放入缓存中：

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}