Nuxt 和 Bootstrap vue css 在 html 头

Question

出于某种原因，当我在 heroku 上推送我的项目时，bootstrap css 像这样包含在头部

<head>
<title></title>
(..)
<style data-vue-ssr-id="90433b46:0 8b4ab2e8:0 2c8d02e5:0 396e4108:0 01194ca0:0 203df954:0 0323c590:0 5ebbc628:0 7e87bec3:0">/*!
--
  | * Bootstrap v4.1.1 (https://getbootstrap.com/)
  | * Copyright 2011-2018 The Bootstrap Authors
  | * Copyright 2011-2018 Twitter, Inc.
  | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  | */*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent
(..)

我是不是做错了什么？？

我已将 NPM_CONFIG_PRODUCTION 设置为 true 并且 NODE_ENV 已设置为生产。

我包含它的方式与文档相同

modules: [
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',

(...)

我理解为什么在使用 npm 运行 watch 进行热重载时会发生这种情况，但是 在生产环境中 我想在外部文件中包含 css它将像任何其他 css 一样包含在内（带有 < link > ）

有什么想法吗？

Answer 1

您正在查找 extractCSS 配置属性。参见 docs

Nuxt 和 Bootstrap vue css 在 html 头

Nuxt and Bootstrap vue css in html head

twitter-bootstrap

vue.js

nuxt.js