本文目录一览：
- 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 文件到指定的目录中
1、配置在当前目录生成.wxss
2、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 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装需要的loader和依赖
6.创建一个名为 test.less 的文件
并将该文件引入 webpack 的入口文件 entry.js 中；
7.配置编译 less 的 loader
7.运行编译命令
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了。
原创文章，作者：EDZB，如若转载，请注明出处：https://www.506064.com/n/139621.html
微信扫一扫 
支付宝扫一扫 