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

Question

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>

It doesn't make any sense to import a non-script into another script. — Randy Casburn, Jun 08 '19 at 23:08
It doesn’t make sure, you will indeed need a bundled like webpack — Patrick Hund, Jun 08 '19 at 23:13
May be you can use **alternative style sheets** => https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets — Mister Jojo, Jun 08 '19 at 23:27

score 6 · Accepted Answer · answered Jun 09 '19 at 22:26

6

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>

answered Jun 09 '19 at 22:26

Jack Bashford

43,180
11
50
79

Perfect! It gets the job done (even though it's an ugly way of doing it) – Liga Jun 10 '19 at 08:36
1

For me, this reloaded the entire CSS files present in the file, making it look a bit ugly for some time. Append worked the best for me. – Divya Barsode Jun 30 '20 at 11:41
@Liga so is it perfect or ugly? :) – php_nub_qq Sep 28 '20 at 15:10

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

1 Answers1

Linked