在前端开发中，Webpack 是一个非常常用的工具，它可以将多个 JavaScript 文件打包成一个文件，以及对样式、图片等资源进行处理。但是，在使用 Webpack 打包后，有时候会遇到样式不起作用的问题，这是因为 Webpack 默认会将样式文件当作模块来处理，而不是直接将其插入到 HTML 中，因此需要进行一些配置才能解决这个问题。
解决方法
方法一：使用 style-loader 和 css-loader
在 Webpack 中，可以使用 style-loader 和 css-loader 这两个 loader 来处理样式文件。其中，css-loader 可以将 CSS 文件转换成 JavaScript 模块，而 style-loader 可以将生成的 CSS 模块插入到 HTML 的 head 中。
首先，在命令行中安装这两个 loader：
--- ------- ------------ ---------- ----------
然后，在 Webpack 配置文件中添加以下代码：
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-这样，Webpack 就会将所有以 .css 结尾的文件都使用 style-loader 和 css-loader 进行处理。
方法二：使用 MiniCssExtractPlugin
如果不想将样式文件插入到 HTML 中，可以使用 MiniCssExtractPlugin 将样式文件提取成单独的文件。这样做的好处是可以将样式文件缓存起来，从而提高网站的加载速度。
首先，在命令行中安装 MiniCssExtractPlugin：
--- ------- ----------------------- ----------
然后，在 Webpack 配置文件中添加以下代码：
----- -------------------- - ----------------------------------
------- -
------ -
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- ----------------------
--------- --------------------------
--
-这样，Webpack 就会将所有以 .css 结尾的文件都使用 MiniCssExtractPlugin 进行处理，并将提取出来的样式文件命名为 [name].[contenthash].css。
示例代码
以下是一个简单的示例代码，演示了如何使用 style-loader 和 css-loader：
-- -------- ------ ------------- ------------------- --------
-- --------- -- ---- - ----------------- -------- -
-- -----------------
-------------- - -
------ -------------
------- -
--------- ---------
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
-在浏览器中打开 index.html，就会发现背景色变成了灰色。
总结
本文介绍了两种解决 Webpack 打包后样式不起作用的方法：使用 style-loader 和 css-loader，以及使用 MiniCssExtractPlugin。其中，使用 MiniCssExtractPlugin 可以将样式文件提取成单独的文件，从而提高网站的加载速度。无论使用哪种方法，都需要在 Webpack 配置文件中进行相应的配置。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6583d2a1d2f5e1655de9cdaf