Nuxt中的条件样式表 [英] Conditional stylesheet in Nuxt
问题描述
即使使用IE前缀，我的CSS也无法在Internet Explorer中很好地呈现.所以我想尝试条件样式表，但是我不确定如何在Nuxt中解决这个问题
My CSS is not rendering well in Internet explorer even after using IE prefixes. So I want to try conditional stylesheet, but I'm not sure how to go about that in Nuxt
在Nuxt中，最好的选择是在nuxt.config.js中使用CSS条件样式表，或者在default.vue模板中使用它，但是由于条件样式表通常应用于head标签，因此不适合在那里.
In Nuxt the best bet is to use CSS Conditional stylesheet in nuxt.config.js or use it in the default.vue template, but that does not fit in there since conditional stylesheet is normally applied in the head tag.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
这是我要尝试的典型示例.如果我能获得格式化方面的帮助，则可以在nuxt.config.js或Vue组件中使用它.
This a typical example of what I want to try. If I can get help on how to format it so it can be used in the nuxt.config.js or in Vue component.
推荐答案
您可以从Nuxt扩展默认的HTML模板.
You can extend the default HTML template from Nuxt.
在项目的根目录下创建一个新文件"app.html"，并使用设置您的自定义html模板.
Create a new file "app.html" at the root of your project and set your custom html template with .
请参阅文档: 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中的条件样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
