php編譯less文件,less編譯css

本文目錄一覽：

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