文章彙整

使用Magento2 原生工具來將LESS編譯成CSS

By Astral Web 1 month agoNo Comments
首頁  /  Magento  /  Magento安裝設定  /  使用Magento2 原生工具來將LESS編譯成CSS

Compile LESS using Grunt (Magento 2 regular tools)

Magento2 提供Blank以及Luma二款預設的主題包,這二款主題包都是使用LESS來編譯CSS。在這篇文章中,我們要為您介紹如何使用Grunt來開發及調整CSS。

 

1 首先為您的開發環境安裝 Node js。

 

2 首先為您的開發環境安裝Grunt。

npm install -g grunt-cli

 

3 在Magent2 的根目錄底下找到以下二個檔案,並且將他重新命名。

package.json.sample 重名命名為  package.json

Gruntfile.js.sample 重名命名為  Gruntfile.js

 

4 安裝所需的Grunt工具,請照著以下步驟實行。

移至Magento的根目錄

cd <Magento 根目錄>
npm install
npm update

 

5 將您的主題包添加到Grunt的配置中。您有二種方式可以使用

5-1 開啟dev/tools/grunt/configs/themes.js檔案。將配置添加進去

   <theme>: {
        area: ‘frontend’,
        name: ‘<Vendor>/<theme>’,
        locale: ‘<language>’,
        files: [
            ‘<path_to_file1>’, //path to root source file
            ‘<path_to_file2>’
        ],
        dsl: ‘less’
    },

5-2 在dev/tools/grunt/configs/底下新增一個local-themes.js檔案。

增加檔案的內容如下:

‘use strict’;

module.exports = {

        area: ‘frontend’,
        name: ‘<Vendor>/<theme>’,
        locale: ‘<language>’,
        files: [
            ‘<path_to_file1>’, //path to root source file
            ‘<path_to_file2>’
        ],
        dsl: ‘less’

};

6 照順序執行以下命令

 

grunt clean

grunt exec:<theme>

grunt less:<theme>

grunt watch

 

在截圖的實例中,我們為主題包設定的名稱是less,所以在執行grunt命令時,我們應該要使用

grunt exec:less

grunt less:less

 

7 俢改資料夾的屬性

 

chmod -R -v 777 pub/static var/cache
  1. 重整Magento頁面,並打開Google開發者工具

9.將滑鼠滑到_module.less:51 上面,可以得到less檔案的路徑,點擊_module.less:51 則可以直接看less檔的內容。

待調整完畢之後再重新deploy一次就可以囉。

以上是針對Magento2 原生工具來將LESS編譯成CSS的文章介紹,如果有您有更多疑問可以詢問我們,未來會撰寫更多電商網站相關文章,您想知道什麼嗎?歡迎在下方留言給我們。或追蹤我們的粉絲專頁,就不錯過最新文章喔!

想學習更多Magento設定嗎?請見:Magento教學導覽

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento安裝設定

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。