本文目录一览：

1. webstorm | 编译 Less 保存自动生成 wxss/acss/css
2. 怎样用Prepros实时编译less文件
3. webpack编译less
4. php怎么编译成一个个独立的mod

webstorm | 编译 Less 保存自动生成 wxss/acss/css

因为感觉用 微信开发者工具 开发很不习惯，所以都是用 WebStorm 来开发，再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less 配置方案

1. 配置在当前目录生成.wxss
2. less独立文件夹，生成 .wxss 文件到指定的目录中
3. 配置在当前目录生成.wxss
4. less独立文件夹，生成 .wxss 文件到指定的目录中
   和微信步骤一样，只是后缀不同 路径 File | Settings | Tools | File Watchers | + 点加号，选择less, 弹出下面的窗口，已经有默认配置了，点ok即可

怎样用Prepros实时编译less文件

文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。 启动node.js控制台，进入test.less文件所在的目录，输入 lessc test.less test.css 命令，less文件就会被编译成css文件

webpack编译less

webpack loaders webpack 编译 less 需要使用到的 loader :

• less-loader
  将 less 文件编译成 CSS ；

1. 创建本地项目 webpack-demo
2. 在 webpack-demo 的根目录下创建 package.json 文件
3. 模块说明：
4. 修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5. 安装需要的loader和依赖
6. 创建一个名为 test.less 的文件
7. 并将该文件引入 webpack 的入口文件 entry.js 中；
8. 配置编译 less 的 loader
9. 运行编译命令

php怎么编译成一个个独立的mod

配置PhpStorm 在PhpStorm中新建一个LESS文件，PhpStorm将提示你添加FileWatcher，或者通过 Settings-Tools-File Watcher 进入File Watcher界面添加一个LESS的File Watcher 添加界面如下： 我们主要修改的是 Arguments 和 Output paths to refresh。

• Arguments: --no-color --source-map=../css/$FileNameWithoutExtension$.css.map $FileName$
• Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css: $FileParentDir$/css/$FileNameWithoutExtension$.css.map
  最终生成的目录结构： 好了，经过这样的设置就能使用PhpStorm自动编译LESS了。