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

【问题标题】：Nuxt.js: How move Global CSS from style tag to css fileNuxt.js：如何将全局 CSS 从样式标签移动到 css 文件
【发布时间】：2021-05-16 10:32:36
【问题描述】：

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

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

Launch npm run build 然后npm run generate，然后我进入 dist 文件夹并打开 index.html 文件，我看到的都是 css（和它太大了）在页面的style标签内：

Nuxt.js 已从资产编译 SCSS 文件并将 CSS 放入样式标签中。像这样放入文件并与head部分中的链接标签连接？

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

你可能会说我可以在nuxt.config.js 中使用 head 设置，但我不能，因为它只能用于远程和静态文件，它不能像这样工作：

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 构建配置？请帮助我理解:-)

【问题讨论】：

标签： javascript vue.js webpack nuxt.js

【解决方案1】：

您可以使用 extractCSS 构建选项将所有 CSS 资产提取到单独的文件中（通常每个组件一个），并允许您将每个 CSS 文件放入缓存中：

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}

【讨论】：

数据有效！我会更准确地阅读文档。感谢您的回答和文档链接。
我想知道将其默认设置为 true 是否存在一些问题，因为这似乎非常好并且没有缺点。