在前端开发中，Sass 是一个十分有用的工具，能够极大地增加开发效率并改善代码质量。但是，为了使用 Sass，我们需要安装 Sass 的编译器，这个过程比较繁琐。而使用 npm 包 init-sass，则可以方便快捷地进行 Sass 的配置。
安装 npm 包 init-sass
打开终端，执行以下命令，即可全局安装 init-sass：
npm install -g init-sass
初始化 Sass 项目
在终端中，进入要初始化的项目文件夹，执行以下命令，即可初始化 Sass 项目：
init-sass
执行命令后，会出现以下提示：
? Project name ? Description ? Author ? Do you want to use webpack, gulp, or grunt? (Use arrow keys) ❯ webpack gulp grunt
分别输入项目名称、项目描述、作者信息，并选择使用的构建工具（这里选择 webpack，其他选项也类似）。
等待命令执行完毕后，会自动生成以下文件目录：
├── /src │ └── /sass │ └── /style.scss ├── /dist │ └── /style.css ├── /node_modules ├── /package.json └── /webpack.config.js
其中，/src/sass/style.scss 是 Sass 的文件，/dist/style.css 是编译后的 CSS 文件。
配置 webpack
因为选择了 webpack，所以需要进行相应的配置。打开 webpack.config.js 文件，添加以下配置：
-- -------------------- ---- -------
--- ---- - ----------------
-------------- - -
------ ------------------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ --
----- ----------
---- -
---------------
-------------
-------------
-
--
-
--配置完成后，在终端中执行以下命令，即可启动项目：
npm run start
示例代码
Sass 文件：
$primary-color: #2f4f4f;
$secondary-color: #008080;
body {
background-color: $primary-color;
color: $secondary-color;
}编译后的 CSS 文件：
body {
background-color: #2f4f4f;
color: #008080;
}总结
使用 npm 包 init-sass 可以方便快捷地进行 Sass 项目的初始化和配置，并提供了一套完整的 Sass 编译方案。这对于前端开发人员来说是一个十分有益的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d581e8991b448d208c