es6的import是不是也可以导入css和scss？

Question

看别人的vue项目，在入口文件里用es6的import直接导入了css和scss。

那么es6的import导入css和@import导入css有什么区别呢？

Answer 1

在使用构建工具的环境中，比如webpack，配置了相应的loader，是可以import 各种文件的，比如css,less，png,svg等等。

因为webpack把所有文件都当做模块来处理，只不过默认它只认识js，如果是其他文件，就需要安装对应的loader了。

如果随便一个js文件，是不能使用import语法引入css等文件的。

至于es6的import导入css和@import导入css的区别，还是上面说的，直接使用import是不能引入css的，而@import是css默认的语法。

当配置了loader之后，只有用法上的区别，import只能在js文件中使用，或者.vue文件中的<script>标签中，而@import只能在.vue文件的<style>标签中使用。

Answer 2

不可以。实际上不仅不能导入非 JS 文件，连导入的 JS 文件的格式都要严格规定。

建议好好了解一下 ESM。