能否用ES6模块导入.css文件？无需打包器/转译器可行吗？

这个问题我之前也碰到过！不用webpack这类打包器确实能加载CSS，但直接用ES模块语法import './style.css'是行不通的，原因和解决方法我给你捋清楚：

为什么会报MIME类型错误？ #

当你给script标签加上type="module"时，浏览器会把它当作ES模块处理，此时它只接受JavaScript类型的模块文件（MIME类型为application/javascript）。而CSS文件的MIME类型是text/css，不符合浏览器对ES模块的要求，所以就会抛出你看到的错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/css"

不用打包器的可行方案 #

方案1：使用传统的<link>标签（最推荐） #

这是最简单、兼容性最好的方式，直接在HTML的<head>或<body>里引入CSS文件，完全不需要依赖ES模块的导入语法：

<html>
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="app"> {{ msg }} </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="module">
    new Vue({
      el: '#app',
      data: {
        msg: 'Hello World!'
      }
    })
  </script>
</body>
</html>

方案2：在ES模块中动态创建<link>标签 #

如果需要在JS代码里控制CSS的加载时机（比如按需加载），可以通过DOM操作动态创建并插入link标签，这样既保留了ES模块的用法，又避开了MIME类型的限制：

<html>
<body>
  <div id="app"> {{ msg }} </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="module">
    // 动态加载CSS文件
    const loadCSS = (url) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      link.onload = () => console.log('CSS加载完成');
      document.head.appendChild(link);
    };

    loadCSS('./style.css');

    new Vue({
      el: '#app',
      data: {
        msg: 'Hello World!'
      }
    })
  </script>
</body>
</html>

方案3：实验性的原生CSS模块支持（不推荐生产用） #

部分现代浏览器（如Chrome）有实验性的CSS模块支持，但需要开启特定的浏览器标志，并且语法和用法都还在迭代，兼容性极差，所以不建议在生产环境使用。

总结 #

如果不想用打包工具，方案1和方案2是最稳妥的选择。直接用import './style.css'的方式目前浏览器原生并不支持，因为ES模块规范最初是为JavaScript设计的，CSS模块的原生支持还在发展中。

内容的提问来源于stack exchange，提问作者Liga