Mac下使用IDEA如何安装less和sass并编译（局部/全局安装，IDEA自动编译）

喜欢ヅ旅行 2022-05-14 14:15 557阅读 0赞

这里我们是在一个项目下安装less，即局部less,这里给出在项目下安装less的过程。

1.  在IEDA的终端输入：npm install less  
    这样就安装好了，可以在项目中看见less的目录
2.  接下来是编译less文件a.less，假设我们的less文件是在项目目录src的less目录下：  
    执行： ./node\_mudules/.bin/lessc ./src/less/a.less
3.  如果要生成对应的css文件：  
    ./node\_modules/.bin.lessc ./src/less/a.less>./src/css/a.css  
    这里生成的css文件是在css目录下，如果不指定目录，默认生成在less文件下面，即：  
    ./node\_modules/.bin/lessc a.less>a.css
4.  全局执行只需要lessc命令即可

#### 安装sass ####

sass的安装和less差不多，编译语法也差不多  
安装： npm install node-sass  
编译： ./node-modules/.bin/node-sass ./src/sass/a.scss>./src/css/a.css  
或: ./node-modules/.bin.node-sass a.scss

#### 全局安装 ####

Mac下全局安装less或sass需要管理员权限sudo：  
安装less： sudo npm install less -g  
编译：lessc a.less

安装sass：sudo npm install node-sass -g  
编译：node-sass a.scss

全局安装在任何项目下都可以使用，局部安装只在本项目下可以使用。

#### 自动编译 ####

IDEA下可以实现less和sass的自动编译，这里以less为例：  
假设已经安装全局less:

1.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70]
2.  如果没有安装filewatchers，安装即可![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 1]3. 这里已经添加了less，如果没有选择左下角的➕，添加less4. ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 2]
3.  在program中添加less 的地址，不过这里会默认选择上，点击ok
4.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 3]  
    如图自动编译。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70]: /images/20220504/e105806c5988491e8dc00ba503ea0c5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181026085953851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1,size_27,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 2]: /images/20220504/96b7be80726c43ad82a0b6a625b7a0bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F5YW5nYW5uOTE1_size_27_color_FFFFFF_t_70 3]: /images/20220504/77759f3b437d4cf899ce2f9d8c9adad2.png