一文教你如何像导入JS模块一样导入CSS

在Web开发中，我们经常需要在HTML文件中导入CSS文件用来美化网页。传统的导入方式是在HTML中使用<link>标签进行导入，但有时候我们需要使用JavaScript来动态的导入CSS文件。这里我们将介绍如何像导入JS模块一样导入CSS文件的方法。

方法一：使用import语句

在ES6中，我们可以使用import语句来导入JavaScript模块，但是你可能不知道，import也可以用来导入CSS文件，具体用法如下：

import './style.css';

上述代码中，我们使用import语句导入了当前目录下的style.css文件。需要注意的是，在使用import导入CSS时，文件路径必须以./或../开头，否则会报错。

值得一提的是，虽然我们导入的是CSS文件，但实际上并不会执行CSS文件中的代码，而是会将CSS文件中的样式规则注入到HTML文档中。

方法二：使用@import语句

如果你需要在CSS文件中动态导入另一个CSS文件，则可以使用@import语句。@import语句可以让我们在CSS文件中导入其他CSS文件，具体用法如下：

@import url('./color.css');

上述代码中，我们使用@import语句导入了当前目录下的color.css文件。

需要注意的是，使用@import语句导入CSS文件时，需要将其写在CSS文件的顶部，并且在CSS文件中不应该包含多个@import语句，因为每个@import语句都会发送一个HTTP请求，从而影响页面的性能。

总结

以上就是两种像导入JS模块一样导入CSS文件的方法，分别是使用import语句和@import语句。使用这两种方法都可以让我们更加灵活地管理CSS文件，让我们在Web开发中更快更方便地完成任务。

示例一：使用ES6模块导入CSS文件，在index.js中导入style.css文件。

import './style.css';

示例二：使用@import语句动态导入CSS文件，在style.css中导入color.css文件。

@import url('./color.css');