在前端项目中，我们通常会使用 Sass 来编写样式，而在大型项目中需要拆分成多个模块，为了方便管理和维护，经常会使用 @import 导入其他模块的样式，但是这种做法在 Sass 4 后已经不推荐使用，因为它增加了编译时间。
sass-modules-importer 是一个 npm 包，它是一个可以帮助你以模块化的方式导入 Sass 样式的工具，可以极大地提高开发效率，本篇文章就为大家介绍如何使用此工具。
安装 sass-modules-importer
首先，我们需要在项目中安装 sass-modules-importer，使用 npm 命令即可安装：
npm install sass-modules-importer --save-dev
配置 webpack
使用 sass-modules-importer 之前，我们需要配置 webpack，将其加入 Sass 的解析路径中。以下是一个简单的 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------------------
---- -
---------------
-------------
-
------- --------------
-------- -
------------ -
--------- ---------------------------------- -- ------
-
-
-
-
-
-
-
-在 Sass 的配置中，加入了 sass-modules-importer 的实例。
使用 sass-modules-importer
在 Sass 中，我们可以通过以下方式导入模块：
@use "relative/path/to/module" as module-name;
relative/path/to/module 为我们需要导入的模块，as module-name 为给导入的模块指定一个别名，方便在 Sass 中使用。需要注意的是，导入的模块必须是一个 Sass 文件，以 .scss 或 .sass 结尾。
模块定义的例子如下：
// _variabeles.scss $primary-color: #FF0000;
// _button.scss
@use "variables" as var;
button {
background: var.$primary-color;
}在上述例子中，我们在 button 模块中导入了 variables 模块，并将其命名为 var，然后就可以在 button 模块中使用 $primary-color 变量。
示例代码
下面是一个完整的 Sass 文件示例：
-- -------------------- ---- ------- -- --------------- --------------- -------- ----------------- -------- -- ------------ ---- ----------- -- ---- ------ - ----------- ------------------- ------ --------------------- - -- --------- ---- ---------
在 main.scss 中，我们可以直接使用 button 模块，而 button 模块又依赖 variables 模块。
总结
通过使用 sass-modules-importer，我们可以方便地将 Sass 样式拆分成多个模块，并且以模块化的方式导入，避免了在 Sass 中使用 @import，同时又减少了编译时间。
此外，随着 Sass 5 的版发布，官方也将移除 @import，因此我们更应该使用 @use 和 @forward，以避免在今后升级 Sass 时带来的问题。
希望本篇文章能够帮助大家更好地使用 sass-modules-importer 工具，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76d2