magento2 如何調試LESS？

magento2內置lessphp，在developer模式下會自動編譯LESS。然而並無用，若是less寫錯了會致使lessphp編譯失敗，並且不會提示你已經失敗，你只會看到亂成一團的頁面。另外lessphp並不會加source map定位信息，在頁面上看到的CSS沒法追蹤對應的LESS代碼，對於前端來講，不能定位就至關於沒法工做。那就只有使用grunt來編譯less，若是已經安裝了nodejs，使用如下代碼部署grunt

npm install -g grunt-cli
npm install

若是你使用本身的主題，你還須要在grunt的配置文件裏追加less的配置

// dev/tools/grunt/configs/themes.js
mytheme: {
    area: 'frontend',
    name: '<Vendor>/<Theme>',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
}

而後使用如下代碼可進行less編譯

grunt clean:var
grunt deploy
grunt exec:mytheme
grunt less:mytheme

完成以上過程，能夠在瀏覽器的調試器裏看到LESS的定位。deploy時間至關漫長，幸虧之後每次修改less只須要執行一次grunt less:mytheme，就能夠看到修改效果。

如下是有less定位的效果

指令解釋

grunt clean:var // 刪除var/下的緩存文件
grunt deploy // 把app下的JS, LESS源代碼經過轉換與繼承策略遷移到pub之下，讓瀏覽器能夠訪問
grunt exec:mytheme // pub下的LESS, JS資源軟連接到app裏的源代碼，使直接修改源代碼能夠立刻生效
grunt less:mytheme // pub下全部less編譯爲css

參考：http://devdocs.magento.com/gu...