vue.js - Nuxt : how to have css global styles in files rather than inside of a style tag

Question

我在我的 nuxt 应用程序中添加了 css，如下所示:

css: [
    '@/assets/scss/custom.scss',
    '@/assets/css/master.css',
    '@/assets/css/main.css',
    '@/assets/css/svg.css',
    '@/assets/css/all.min.css',
    '@/assets/css/vue-paginate.css',
    '@/node_modules/vue2-datepicker/index.css',
    '@/assets/css/vue-tooltip.css',
    '@/node_modules/vue-select/dist/vue-select.css',
    '@/node_modules/vue-file-agent/dist/vue-file-agent.css',
    '@/node_modules/sweetalert2/dist/sweetalert2.min.css',
    '@/node_modules/vue-multiselect/dist/vue-multiselect.min.css',
    '@/node_modules/quill/dist/quill.snow.css',
    '@/assets/css/client-style.less',
  ],

每当我尝试查看页面源代码时，它都会向我显示包含的所有 css

那么，有没有办法将这些 css 作为链接包含在所有页面中？

Answer 1

css属性(property)用于此确切目的

Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page)

如果您想在每个页面或组件中包含它，请将您的样式包含在 <style> 中。标签。

如果您希望将它们拆分为文件，我想您可以使用 extractCSS

export default {
  build: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
  }
}

据我了解，与您的问题相同: Nuxt.js: How move Global CSS from style tag to css file