前言
在前端开发中，我们使用 SASS 可以让 CSS 更易于维护和扩展。而在开发过程中，我们可能会使用第三方依赖库，在引入的依赖库中可能会需要引入一些自定义的 SASS 文件。但是在 Webpack 打包过程中，需要得到正确的路径才能正常引入。此时我们就需要使用到 npm 包 node-sass-import。
何为 node-sass-import
node-sass-import 是一个 Node.js 模块，可以帮助我们在 SASS 文件中引用其他文件，这也是 SASS 的常规用法。但是常规使用有以下缺点：
在 webpack 打包项目时，需要手动配置正确的路径。
在 Nuxt.js 项目中，sass 文件需要被同步编译，否则就会造成样式文件不全的情况。
而使用 node-sass-import 则可以解决上述问题，省去手动配置路径的烦恼，同时在 Nuxt.js 项目中也能正常使用。
安装 node-sass-import
我们可以通过 npm 命令来安装 node-sass-import：
npm install node-sass-import --save-dev
使用 node-sass-import
使用 node-sass-import 非常简单，我们只需要在 webpack 或 Nuxt.js 配置文件中加入以下代码：
-- -------------------- ---- -------
----- -------------- - ---------------------------
------ --------
------ -
--------------- -
----- --------------------------- ----------------------- -- -------
--
-------- -
----- -
------------ -
--------- -
----------------
----------- --------- -------
--
-
-
-
-
-
-上面代码表示在构建时，引入了 node-sass-import ，并将其配置加入 scss 加载器中。
示例代码
以下是我们按照上述方式配置的 Nuxt.js 项目中一个基本的 Sass 文件：
-- -------------------- ---- -------
------- -------------------
------- ----------------
-----------
----------- ----------
---------- -----
---------
-------- -----
-------- ------------
-
-支持的选项
node-sass-import 还支持一些选项。
1. extensions
默认情况下，node-sass-import 最高支持.scss格式的文件，如果你想支持 .css 文件，可以在选项中添加：
extensions: ['.scss', '.css']
2. alias
通过 alias 可以为文件夹取别名，这在大型项目中特别有用：
alias: {
'~vars': path.resolve(__dirname, 'assets/variables.scss'),
'~/': path.resolve(__dirname, './')
}结尾
通过本教程，相信大家已经掌握了使用 node-sass-import 的方法。它不仅帮助我们在 SASS 中引入了其他文件，还解决了我们在 webpack 和 Nuxt.js 中的烦恼，大大提高了我们开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f713dc9a9b7065299ccbb3d