Is it possible to import a .css file using ES6 modules?

问题

I am trying to import a .css file using ES6 modules but I am getting an error. Is it even possible to import a css file without using a bundler or a transpiler (like webpack)?

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/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>

回答1:

You can't do it with ES6 modules. You can dynamically import it into the HTML though:

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

来源：https://stackoverflow.com/questions/56510754/is-it-possible-to-import-a-css-file-using-es6-modules

标签

javascript

html

css

ecmascript-6

es6-modules

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!