以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粉絲專頁唷！

技術應用

以SASS開發Magento2佈景主題