本文目录一览:
- 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了。