是否可以使用 ES6 模块导入 .css 文件？
Posted
技术标签:
【中文标题】是否可以使用 ES6 模块导入 .css 文件？【英文标题】：Is it possible to import a .css file using ES6 modules? 【发布时间】：2019-10-23 22:20:53 【问题描述】：我正在尝试使用 ES6 模块导入 .css 文件，但出现错误。甚至可以在不使用捆绑器或转译器（如 webpack）的情况下导入 css 文件吗？
加载模块脚本失败：服务器响应 “text/css”的非 javascript MIME 类型
<html>
<body>
<div id="app">
msg
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module">
import './style.css'
new Vue(
el: '#app',
data:
msg: 'Hello World!'
)
</script>
</body>
</html>
【问题讨论】：
将非脚本导入另一个脚本没有任何意义。 不确定，你确实需要像 webpack 这样的捆绑软件 也许你可以使用替代样式表 => developer.mozilla.org/en-US/docs/Web/CSS/… 【参考方案1】：你不能用 ES6 模块做到这一点。您可以将其动态导入 HTML：
<script>
const url = "./style.css";
document.head.innerHTML += `<link type="text/css" rel="stylesheet" href=$url>`;
</script>
【讨论】：
完美！它完成了工作（即使这是一种丑陋的做法） 对我来说，这会重新加载文件中存在的整个 CSS 文件，让它在一段时间内看起来有点难看。 Append 对我来说效果最好。 @Liga 那么它是完美的还是丑陋的？ :)以上是关于是否可以使用 ES6 模块导入 .css 文件？的主要内容，如果未能解决你的问题，请参考以下文章