您的位置:

php编译less文件,less编译css

本文目录一览:

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了。