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

问题描述

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

I'm confused with the Nuxt.js SCSS compilation...I have the assets folder and it has two SCSS files included in 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(而且它太大了):

Launch npm run build and then npm run generate, then I go into the dist folder and open the index.html file, what I see is all css (and it is too big) inside the style tag on the page:

Nuxt.js 已经从资产中编译了 SCSS 文件并将 CSS 放在样式标签中.像这样放入一个文件并与head部分中的link标签连接?

Nuxt.js has compiled the SCSS files from assets and put CSS in the style tag.How put into a file and connect with link tag in the head section like this?

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

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

You may say I can use head settings in nuxt.config.js, but I cannot because it is possible only with remote and static files, it does not work like this:

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

I did not find in the Nuxt.js documentation how put the Global CSS to a file. Is it possible with Nuxt.js config or change the Webpack build config only? Help me understand please :-)

推荐答案

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

You can use the extractCSS build option to extract all your CSS assets into separate files (usually one per component) and allows you to put in cache each CSS file:

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}

这篇关于Nuxt.js:如何将全局 CSS 从样式标签移动到 css 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！