前端开发中，我们通常需要引入样式来美化网页。在传统的开发方式中，我们使用 <link> 标签将样式文件引入 HTML 中。然而现在，随着前端工程化的普及，我们使用 webpack + babel 进行项目开发，如何在 JS 中使用 import 来引入 CSS 是一个必须掌握的技能。本文将详细介绍在 JS 中使用 import 来引入 CSS 的方法，带给读者深度和学习以及指导意义。
为什么使用 import 来引入 CSS？
在传统的开发方式中，我们通常使用 <link> 标签来引入样式文件。这种方式存在一些缺陷：
- 每个样式文件都需要一个
<link>标签，这显得比较冗余。 - 加载多个样式文件会产生多次网络请求，导致网页加载速度变慢。
- 无法将样式文件打包到 JS 中，这使得样式文件无法利用 webpack 进行优化。
因此，使用 import 来引入 CSS 是一个更加优雅和高效的方式。
如何使用 import 引入 CSS？
在 webpack 中，我们可以使用 css-loader 和 style-loader 两个插件将 CSS 打包成 JS 文件，然后在 JS 中使用 import 引入 CSS。
安装 css-loader 和 style-loader
npm install css-loader style-loader --save-dev
在 webpack.config.js 中配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--在 JS 中使用 import 引入 CSS
import './style.css';
深度剖析
我们已经了解了如何使用 import 引入 CSS，但其具体原理是什么呢？
webpack 会通过 css-loader 将 CSS 转换成 JS 模块，并将 CSS 代码嵌入到 JS 中。style-loader 则在浏览器中创建一个 <style> 标签，并将 CSS 代码插入到这个标签中。
在最终打包后，CSS 代码实际上已经转化成了 JS 代码，然后由 style-loader 负责将其应用到浏览器中。
总结
本文详解了在 JS 中使用 import 引入 CSS 的方法，同时也介绍了其优点和原理。通过这种方式，我们可以避免传统方式的缺陷，提升网页加载速度和代码的可维护性。
使用 webpack + babel 进行前端工程化，更是提高了前端开发的效率，值得大家学习和掌握。
示例代码
- webpack.config.js
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--- style.css
body {
background-color: #eee;
}
h1 {
color: #f00;
}- index.js
import './style.css'; document.body.innerHTML = '<h1>Hello World</h1>';
注：示例代码并未完整演示 webpack + babel 的具体配置，仅仅是为了演示如何使用 import 引入 CSS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471aaad968c7c53b0f8e43c