文章彙整

以SASS開發Magento2佈景主題

By Astral Web 4 weeks agoNo Comments
首頁  /  Magento  /  Magento-2  /  以SASS開發Magento2佈景主題

以SASS開發Magento2佈景主題

Magento2 預設是使用Less及Grunt來產生css檔案。當然我們也可以使用別的工具、例如Sass及Gulp。接下來要介紹如何建置Sass及Gulp的開發環境。

 

1. 在主題包的根目錄底下新增一個package.json 檔案。檔案的路徑如下:

app/design/frontend/<Vendor>/<theme>/package.json

檔案的內容請複製底下的範例。

{

"author": "Magento Commerce Inc.",

"description": "Magento node modules dependencies for local development",

"version": "1.0.0",

"main": "gulpfile.js",

"dependencies": {

"path": "^0.12.7"

},

"devDependencies": {

"gulp": "^3.9.1",

"gulp-notify": "^3.0.0",

"gulp-plumber": "^1.1.0",

"gulp-sass": "^3.1.0"

},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

}

}

 

2.在主題包的根目錄底下執行以下的命令來安裝Gulp

npm install –save gulp-install

 

3.在主題包的根目錄底下新增一個gulpfile.js 檔案。檔案的路徑如下:

app/design/frontend/<Vendor>/<theme>/gulpfile.js

檔案的內容請複製底下的範例。

var gulp = require('gulp'),

sass = require('gulp-sass'),

plumber = require('gulp-plumber'),

notify = require('gulp-notify');


var config = {

src : './styles/**/*.scss',

dest : './web/css/'

};


// Error message

var onError = function (err) {

notify.onError({

title : 'Gulp',

subtitle: 'Failure!',

message : 'Error: <%= error.message %>',

sound : 'Beep'

})(err);


this.emit('end');

};


// Compile CSS

gulp.task('styles', function () {

var stream = gulp

.src([config.src])

.pipe(plumber({errorHandler: onError}))

.pipe(sass().on('error', sass.logError));


return stream

.pipe(gulp.dest('./web/css/'));

});


gulp.task('watch', function () {

gulp.watch(config.src, ['styles']);

});

上面的範例會將 「app/design/frontend/<Vendor>/<theme>/styles/」目錄中的scss檔案編譯成css檔案,

並存在 「app/design/frontend/<Vendor>/<theme>/web/css/」目錄中。

 

 

4.在app/design/frontend/<Vendor>/<theme>/styles/目錄中新增styles.scss。

 

5.在app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/目錄中新增一個default_head_blocks.xml來將宣告使用css檔。

檔案的內容如下:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

   <head>

<css src="css/styles.css"/>

   </head>

</page>

 

6.在主題包的根目錄底下執行 gulp styles。

執行的結果會在app/design/frontend/<Vendor>/<theme>/web/css/目錄中看到新生成的styles.css。

 

7.如果希望Gulp可以自動監看sass檔案的變化、自動生成css檔的話,就在主題包的根目錄底下執行 gulp watch。

 

使用Sass開發Magento主題,你需要從頭開始編寫自己的css樣式。如果需要Magento UI的樣式庫,可以下載SNOW.DOG的 magento2-theme-blank-sass主題包 (https://github.com/SnowdogApps/magento2-theme-blank-sass)來使用。

這個主題包可以看成是Magento blank的Sass版本。SNOW.DOG是Magento的合作夥伴

magento2-theme-blank-sass 是他們所提供的Sass主題包,主題包的效果接近Magento blank,但還是有一點點的小差距。不過光是佛心的把Magento UI 改成Sass版本的這件事,就值得我們致上萬分的謝意了!

 

如果使用SNOW.DOG的 magento2-theme-blank-sass主題包,需將gulpfile.js 調整如下:

var gulp = require('gulp'),

sass = require('gulp-sass'),

plumber = require('gulp-plumber'),

notify = require('gulp-notify');


var config = {

src : './styles/**/*.scss',

dest : './web/css/',

watching : './**/*.scss'

};


// Error message

var onError = function (err) {

notify.onError({

title : 'Gulp',

subtitle: 'Failure!',

message : 'Error: <%= error.message %>',

sound : 'Beep'

})(err);


this.emit('end');

};


// Compile CSS

gulp.task('styles', function () {

var stream = gulp

.src([config.src])

.pipe(plumber({errorHandler: onError}))

.pipe(sass().on('error', sass.logError));


return stream

.pipe(gulp.dest('./web/css/'));

});


gulp.task('watch', function () {

gulp.watch(config.watching, ['styles']);

});

如有疑問可以參考Magento官方文件https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/gulp-sass.html

更多Magento相關文章請看: Magento教學導覽

未來會撰寫更多Magento 2相關文章,歡迎在下方留言給我們,也別忘了訂閱我們的電子報,以及追蹤我們的Facebook粉絲專頁唷!

 

 

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

 000

推薦文章

Category:
  Magento-2

留下回應

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

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

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

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