Question

我正在尝试使用ES6模块导入.css文件，但出现错误。甚至可以在不使用捆绑器或转译器（例如webpack）的情况下导入css文件吗？

无法加载模块脚本：服务器回应为非JavaScript MIME类型的“文本/ css”

<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>

Answer 1

ES6模块无法做到这一点。您可以通过以下方式将其动态导入HTML：

<script>
    const url = "./style.css";
    document.head.innerHTML += `<link type="text/css" rel="stylesheet" href=${url}>`;
</script>

是否可以使用ES6模块导入.css文件？

1 个答案: