Published on

Magento 2 Nuevo tema usando Sass y Gulp

Authors
  • avatar
    Name
    Edgar Gomez
    Twitter
Magento 2 Nuevo tema usando Sass y Gulp

Introducción: Less y no Sass en Magento 2

Magento 2 Gulp

Objetivo

El objetivo es crear un tema propio que extienda de Magento Blank y que utilice Sass con Gulp. Este tutorial se realiza en un Mac.

Crear un tema de Magento 2

  • Creamos una carpeta llamada Empresa en app/design/frontend
  • Creamos una carpeta llamada Mitema en app/design/frontend/Empresa
  • Creamos un fichero "theme.xml" con el siguiente contenido:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Mitema</title>
     <parent>Magento/blank</parent>
     <media>
         <preview_image>web/images/logo.png</preview_image>
     </media>
 </theme>
  • Creamos un fichero "registration.php" con el siguiente contenido:
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Empresa/Mitema',
    __DIR__
);
  • Creamos un fichero "package.json" con el siguiente contenido:
package.json
{
  "author": "Magento Commerce Inc.",
  "description": "Magento node modules dependencies for local development",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp-install": "^1.1.0",
    "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"
  }
}
  • Creamos un fichero "gulpfile.js" con el siguiente contenido:
gulpfile.js
var gulp = require('gulp'),
  sass = require('gulp-sass'),
  plumber = require('gulp-plumber'),
  notify = require('gulp-notify');

var config = {
  src: './web/css/*.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/'));
});
  • Creamos el directorio "web" y dentro dos directorios más: "css" e "images" en el cual podéis poner una imagen "logo.png" a vuestro gusto.
  • Creamos en la raiz del tema, es decir, Empresa/Mitema un directorio "Magento_Theme" con un subdirectorio "layout" y dentro un fichero "default_head_blocks.xml" con el siguiente contenido:
default_head_blocks.xml
  <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>
Magento 2 Sass

Instalando Gulp y compilando CSS

Para instalar Gulp y hacerlo funcionar necesitamos el comando "npm" que viene con "node". Para instalar node necesitamos brew. Si no lo tenéis en vuestro sistema, podéis instalarlo siguiendo los pasos desde este enlace https://brew.sh/index_es.html. Una vez instalado brew ejecutamos brew install node y esperamos a que termine. Cuando acabe podéis probar que funcione tanto node como npm ejecutando node -v y npm -v que deberían de devolver la versión instalada. Ejecutamos los siguientes comandos:

  • npm install gulp
  • npm install gulp-sass
  • npm gulp notify
  • npm gulp plumber

Si os faltase alguno, al compilar os daría un error parecido a estos:

module.js:538
throw err;
^

Error: Cannot find module 'gulp-plumber'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/magento2/app/design/frontend/Empresa/Mitema/gulpfile.js:4:21)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)

Una vez instalado Gulp vamos a crear dos fichero Sass  en web/css styles.scss y _colors.scss. En _colors.scss añadimos lo siguiente $color-red: red; y en styles.scss lo siguente:

styles.scss
@import '_colors';

body {
  background-color: $color-red;
}

Ejecutamos el comando gulp styles y deberiamos ver algo como esto:

  [17:22:33] Using gulpfile
  ~/magento/app/design/frontend/Empresa/Mitema/gulpfile.js [17:22:33] Starting
  'styles'... [17:22:33] Finished 'styles' after 53 ms

Si nos fijamos en la carpeta css veremos que se ha creado el archivo styles.css y en su interior tenemos compilado el código css que añade el valor de la variable red a nuestro código de styles.scss.

Activando el tema en Magento 2

Desde el backoffice vamos a Content > Themes y veremos que uno de los temas del listado es el nuestro: Mitema. Desde Content > Configuration podemos seleccionar la opción de store view e indicarle que utilice nuestro tema. Automaticamente veréis Magento sin el tema Luma con el que viene por defecto, en su lugar está el tema Mitema que es exactamente igual al Blank pero con todo el fondo rojo gracias a vuestro Css compilado con Sass y Gulp.


Si el tema no os aparece lanzad el comando php bin/magento setup:upgrade . Para resolver cualquier duda podéis usar los comentarios.