Webpack 是前端开发中常用的打包工具之一，但在使用 Webpack 打包项目时，有时会遇到样式失效的问题，本文将为读者详细介绍这个问题的来源以及解决方法。
问题来源
在使用 Webpack4 打包项目时，如果样式文件中使用了相对路径引入其他样式文件，那么在打包后，该样式文件中引用的其他样式文件路径可能会发生错误。造成样式失效。
例如，考虑以下文件结构：
|-src/ | |-styles/ | | |-main.css | | |-sub.css | |-index.js
在 main.css 中使用 @import 引入 sub.css：
@import './sub.css';
如果在打包配置文件中开启了 css-loader，那么在打包后生成的 main.css 文件中，@import 引入的路径就会变为相对于 output.path 输出目录的路径，而不是相对于 main.css 的路径：
@import '../styles/sub.css';
这种情况下，main.css 文件中引用的路径会发生错误，因而造成样式失效。
解决方法
一种解决方法是使用 file-loader 或 url-loader 将样式文件中引用的其他样式文件复制到打包生成的输出目录中，并在样式文件中使用相对于 output.path 输出目录的路径引用外部样式文件。
以下是一种可能的解决方法：
在 webpack.config.js 文件中配置 file-loader 或 url-loader，为样式文件中引用的资源文件复制到输出目录中：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- --------
---- -
---------------
-
------- --------------
-------- -
----- ------------------------
----------- ----------
----------- ------------------
-
--
------------
-
-
-
--
-----
-注意其中的 outputPath 和 publicPath：
outputPath指定复制到输出目录中的路径，此处为styles/，表示所有复制的文件都将存储在输出目录的styles目录下。publicPath指定样式文件中引用的外部样式文件的路径，此处为../../src/styles，表示样式文件中引用的所有外部样式文件，都将相对于output.path计算存储路径，再添加上../..前缀，以表示相对于项目根目录的路径。
使用以上配置后，在 main.css 中引用 sub.css 时，应该改为以下方式：
@import '~styles/sub.css';
其中，~styles 表示相对于 publicPath 指定的路径计算存储路径，因而能正确引用样式文件。
示例代码
以下是一个综合示例代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
--------------- ------------
----- ---------------- ----------------------- --
-------
------
------------ ---------
-------
-------// index.js import './styles/index.css';
-- -------------------- ---- ------- -- ---------------- -- ------- ------------------ ---- - ----------- ----- ------------------- -------- ------ ---- - -- - ------ -------- -
例如的文件结构：
-- -------------------- ---- ------- ------ - --------- - - ----------- - - --------- - - ------ - - -------- - ---------- ------- - ----------- - ---------- --------------- -------------- -------------------
webpack.config.js 中的配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- -----------
----- ----------------------- -------
--
----- --------------
------- -
------ -
-
----- ---------
---- -
---------------
-
------- --------------
-------- -
----- ------------------------
----------- ----------
----------- ------------------
-
--
------------
-
--
-
----- ---------------------
---- -
-
------- --------------
-------- -
----- ------------------------
----------- -------
----------- ----------------------
-
-
-
-
-
-
--使用以上配置后，打包生成的 index.css 文件如下：
-- -------------------- ---- ------- -- ---------------- -- ------- ------------------------------ ---- - ----------- ----- ----------------------------------------- -------- ------ ---- - -- - ------ -------- -
以上步骤保证了样式文件中使用相对路径引用其他样式文件、图片等资源，即可在打包后正常解析，并保存在正确的位置中，保证页面的正确展示与渲染。
结论
Webpack4 打包后样式失效的问题，通常是因为样式文件中相对路径引用其他样式或资源文件时，路径计算错误导致的。使用 file-loader 或 url-loader，在打包时将外部样式文件复制到输出目录中，并正确计算样式文件中引用外部样式文件的路径，可以解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffb8a71b0bf82c71cee525