前言
在前端开发中，样式表一般由 CSS 或 SCSS 编写，这些样式表经过打包后，会成为页面所引用的 CSS 文件。Webpack 是目前最为流行的前端打包工具之一，它可以将多个样式表进行打包，但是在打包过程中需要注意样式表的引入顺序，否则可能会出现一些奇怪的样式问题。
引入顺序的问题
在 Webpack 打包时，每个样式表都会被打包成一个 CSS 文件，并且在 HTML 文件的头部引用。但是，如果这些样式表之间存在依赖关系，那么它们的引入顺序就至关重要。因为后引用的样式表会对先引用的样式表进行覆盖，从而造成一些样式上的问题。
以 SCSS 样式表为例，假设我们有两个样式文件 base.scss 和 theme.scss，其中 theme.scss 依赖于 base.scss。那么如果我们在 HTML 文件中先引用 theme.css 再引用 base.css，那么在样式上会出现问题，因为 theme.scss 中的样式会覆盖 base.scss 中的样式。
解决方案
为了解决上述问题，我们需要注意在 Webpack 中对样式表进行引入。
首先是通过 @import 导入 SCSS 样式文件时的顺序。我们需要将依赖关系较低的样式表放在最前面，依赖关系较高的样式表放在最后面。在上面的例子中，我们应该先引入 base.scss 再引入 theme.scss，这样就可以避免 theme.scss 中的样式覆盖 base.scss 中的样式。
接下来是通过 Webpack 中配置 style-loader 和 css-loader 来解决样式覆盖问题。我们可以将 style-loader 放在最后一个进行引入，这样样式表中的样式就会按照文件的引入顺序进行覆盖，避免了样式被其他样式表所覆盖的问题。
下面是示例代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
--------------- -- ------
-------------
--------------
--
--
--
--
--总结
在开发中，我们要注意样式表之间的依赖关系以及打包时的引入顺序。如果对打包的样式表引入顺序不确定，可以通过 Webpack 的配置来避免样式被覆盖发生的问题。
最后，希望大家能够通过本文学习到相关的知识，并在实际开发中注意这些问题的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65965958eb4cecbf2da2f946