是否可以使用 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 文件?的主要内容,如果未能解决你的问题,请参考以下文章

Deno:你能拦截模块加载/导入吗?

将选项传递给 ES6 模块导入

ES6 模块,啥算作第一次导入?

是否可以使用通配符从目录中的所有文件导入模块?

是否可以使用通配符从目录中的所有文件导入模块?

ES6的模块加载器也能加载资产吗(html/css/...)