SASS是一种CSS预处理器，它能够让我们更加方便地写CSS代码，提高开发效率。其中" @import "指令能够将多个SASS文件合并成一个CSS文件，方便我们维护代码。但是在实际开发过程中，这个指令有时候会出现一些问题，接下来我们将会详细介绍这些问题以及解决方法。
问题描述
在使用SASS时，我们可能会遇到以下两个问题：
" @import " 指令造成了代码冗余，使得CSS文件过于庞大，加载时间过长。
" @import " 在部分浏览器上可能存在加载问题，例如IE8及以下版本, Chrome在同步加载下某些情况下会发生错误。
以上两个问题会导致网页资源加载速度变慢，用户体验受到影响。
解决方法
为了解决以上问题，我们可以采取以下解决方法：
方法1: 使用CSS预处理器的模块功能
各类CSS预处理器都支持模块功能，通过此功能可以将CSS文件拆分成多个模块并单独编写，最后在需要时通过" @include "功能进行组合达到相同的效果，并且不会出现代码冗余情况。例如下面的示例代码：
-- -------------------- ---- -------
-- -----------
------- -
----------------- -----
------- -----
------ -----
-
-- ---------
----- -
----------------- -----
------- -----
------ ------
------- - -----
-
------------
------- ---------
------- -------在上述示例中，header.scss和main.scss为两个单独的模块文件，最后在style.scss文件中通过" @import "将两个模块合并。
通过此方式，不仅能够避免CSS加载问题，同时也达到了代码复用和维护的效果。
方法2: 使用WebPack进行打包
WebPack是一种现代前端打包工具，支持将多个JS和CSS文件合并打包成一个文件，上线时通过直接加载这个文件可以减少不必要的网络请求。
在使用WebPack时，我们可以通过使用各个loader或plugin实现CSS文件打包功能。具体方式如下：
配置sass-loader解析SASS文件。
使用ExtractTextPlugin将SASS文件中的样式提取到单独的CSS文件中。
使用optimize-css-assets-webpack-plugin压缩CSS文件。
最终达到的效果是将所有样式集中在一个CSS文件中，大大提高了网页加载速度和用户体验。例如下面的示例代码：
-- -------------------- ---- -------
-- -----------------
----- ----------------- - --------------------------------------
----- ----------------------- - ---------------------------------------------
-------------- - -
------ -
---- --------------
--
------- -
--------- ------------
----- --------
--
------- -
------ --
----- ----------
---- ---------------------------
--------- ---------------
---- --
------- ------------
--
-
------- -------------
-
-
--
--
--
-------- -
--- -----------------------------
--- -------------------------
-
-通过以上方式，可以将所有的样式全部打包到app.css文件中，从而避免了" @import " 指令造成的问题，在网页加载速度方面大大提高了效率。
总结
SASS预处理器的" @import " 指令在实际开发中可能会存在一些不利问题。为了避免这些问题，我们介绍了两种解决方式。具体选择哪种方式可以根据具体场景进行选择，一般情况下使用模块化方案和WebPack进行打包都是比较好的选择。在打包时需要注意的是要对CSS进行压缩，从而减少CSS文件大小和加快加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455759e968c7c53b08fc31b