将 Nuxt 配置为按路由或页面包含 CSS，而不是全局

Posted 2023-02-22

【中文标题】将 Nuxt 配置为按路由或页面包含 CSS，而不是全局

【英文标题】：Configure Nuxt to include CSS by route or page, not globally

【发布时间】：2020-04-25 05:52:17

【问题描述】：

Nuxt 文档中有including CSS globally 的说明，非常有帮助。如果有一种方法可以为某些路由包含 .scss 文件，那也会很有帮助。

例如，有没有办法将new.scss 包含在所有路由/new/* 和old.scss 用于所有路由/old/*？或者只是在整个页面上包含 CSS，例如/new 不一定是它的所有孩子。这也能达到我的目的。

我最初认为这将通过 nuxt.config.js 完成，但也许这可以在页面本身的实际 .vue 文件中完成。

【参考方案1】：

Nuxt 使用 vue-meta，因此您可以像这样在单个页面上包含 CSS：

// inside your page
export default 
  head () 
    return 
      meta: 
        link: [
           rel: 'stylesheet', href: '/css/new.css' ,
        ]
      
    
  

既然是函数，让它动态/per-route应该没问题

// inside your page
export default 
  head () 
    if($route.path.includes('/old/')) 
      return 
        meta: 
          link: [
             rel: 'stylesheet', href: '/css/old.css' ,
          ]
        
      
  

您也可以将其提取到mixin 中并轻松将其应用于多个页面......

【讨论】：

这里是概述how to use vue-meta within Nuxt的具体文档。您可以更新您的答案以反映这一点。

【参考方案2】：

执行此操作的一种方法是将 CSS 导入页面的 Vue 组件的（非范围）style 部分。例如，在pages/old/index.vue 中，您可以拥有以下内容

<style>
@import '~/assets/scss/old.css';
</style>

再次注意，这里的样式标签没有作用域。这是完成这项工作的关键，因为scoped styles 将不适用于子元素（子组件的根元素除外）。

【讨论】：

这在其他方法没有的情况下有效

【参考方案3】：

另一种使用不同layout 并在每个文件上添加各种css 文件的干净方式。所以不同布局的页面可以有不同的风格。