CODEWITHSUNDEEP
javascripthtmlcssecmascript-6es6-modules
Liga
Liga

Reputation: 3439

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>

Upvotes: 9

Views: 8278

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44135

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>

Upvotes: 6

Related Questions