Nuxt 中的条件样式表

Question

即使在使用 IE 前缀后，我的 CSS 也无法在 Internet Explorer 中正常显示。所以我想尝试条件样式表，但我不确定如何在 Nuxt

在 Nuxt 中，最好的选择是在 nuxt.config.js 中使用 CSS 条件样式表或在 default.vue 模板中使用它，但这不适合那里，因为条件样式表通常是应用于头部标签。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

这是我想尝试的一个典型例子。如果我能获得有关如何格式化它的帮助，以便它可以在 nuxt.config.js 或 Vue 组件中使用。

Answer 1

您可以从 Nuxt 扩展默认 HTML 模板。

在项目的根目录下创建一个新文件 "app.html" 并使用 .

设置自定义 html 模板

见文档：https://nuxtjs.org/guide/views#document

// app.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <!--[if IE]><link rel="stylesheet" type="text/css" href="all-ie-only.css"><![endif]-->
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Nuxt 中的条件样式表

Conditional stylesheet in Nuxt

css

internet-explorer

stylesheet

vue.js

nuxt.js