webstrom 配置 sass 和 less 01

发表于

安装less

  1. 安装node 环境
  2. 接下来就可以安装less了
    在“命令提示符”下运行命令“npm install less -g”，然后npm就自动开始下载并安装LESS。
  • 配置webstorm（版本10），点击“file”> “settings……” 弹出设置界面，在左侧导航找到“tool”>”file Watchers” 点击“+”号按钮找到less文件选项点击添加。
  • Arguments：–no-color $FileName$

  • Output paths to refresh：

    $ProjectFileDir$\src\assets\css\$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css

  • 直接配置了输出文件目录，简单但不易于扩展

最后项目结构如下图：

安装sass scss

  1. 安装sass编译工具包

下载地址： https://rubyinstaller.org/downloads/

  1. 配置webstorm（版本10），点击“file”> “settings……” 弹出设置界面，在左侧导航找到“tool”>”file Watchers” 点击“+”号按钮找到sass 或者scss 文件选项点击添加。
  • 配置参数：

    Arguments:
    1
    --no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css