在下一个 js 中导入 css 文件 - Javascript

在前端开发中，通常情况下需要在代码中导入 CSS 文件，这可以通过以下代码实现：

<link rel="stylesheet" type="text/css" href="style.css">

但是，如果你想在一个 js 文件中导入 css 文件，该如何实现呢？

有两种方法可以实现这个目标。

方法一: 创建 link 元素

我们可以使用 Javascript 创建一个 link 元素，然后将其插入到 HTML 文件中的 head 标签中:

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);

这个方法可以很方便地实现在 js 文件中导入 css 文件。

方法二: 导入css模块

从 ES6 开始，我们可以使用 import 语句来导入模块，包括 css 文件。我们需要借助工具将 css 文件转换为模块，比如使用 webpack 和 css-loader。

安装 css-loader:

npm install --save-dev css-loader

然后在 js 文件中使用 import 导入 css 文件:

import './style.css';

这个方法需要使用 webpack 和 css-loader，相对方法一会稍微麻烦一些，但是也可以实现在 js 文件中导入 css 文件。

总结：

以上介绍了两种方法来实现在一个 js 文件中导入 css 文件，每种方法都有其优缺点。大家可以根据具体需求选择合适的方法。