phpstorm webstorm idea 安装 scss sass file watcher

phpstorm webstorm idea 安装 scss sass

在使用 scss 之前，我们需要把开发环境搭好，这里介绍在 idea 系统软件（phpStorm IDEA webStorm等）中如何设置 scss 开发环境，就是让编辑器自动把 scss 文件编译成 css。

安装 node.js

我们所用的 scss 编译核心文件是 node.js 中的一个库，所以需要安装 node.js。 （node.js 是前端开发不可少的库，具体可以自行了解）

安装方法移至官网，选择你系统对应的安装文件安装即可： https://nodejs.org/zh-cn/

安装完成之后，确定可以使用 npm 命令，可以在命令行中运行 npm --version 查看是否安装成功，如果显示版本号，说明安装成功。

kyle-mbp:~ Kyle$ npm --version
6.11.2

全局安装 scss 执行文件

scss 是从 sass 进化过来的，scss 和 sass 使用的是同一个编译器，都是 sass

执行下面命令，把 sass 安装到全局

我的系统是 macOS，其它系统的操作方式类似，自行变通

sudo npm install -g sass

安装成功是这样的

配置编辑器，添加 file watcher

此时，在编辑器新建或打开 scss 文件的时候，会自动提示是否添加对应文件的监视器 file watcher。

此时只需要点击 Yes 即可直接跳到添加 file watcher 的页面。
如果没有这个提示，也可以在软件设置中手动添加：Tools - File Watcher

弹出的设置窗口是这样的：

这里可以设置如何输出 css（压缩与否），和输出 css 的路径等，如果你不需要特别的设置，只需要使用默认值，点确定即可。

成功

此时，在 scss 文件发生变化的时候，软件都会自动编译文件到 css，并带有对应的 .map 文件。
.map 文件的作用是：在浏览器中调试的时候，能把页面的样式对应到源文件 scss 上，可以看到在 scss 上对应的行号

大展身手吧！