Skip to main content
Add Magento version tag.
Link
Khoa TruongDinh
  • 32.3k
  • 11
  • 90
  • 156
Source Link
Alex
  • 14k
  • 19
  • 83
  • 167

How to get frontools styles (less) command to work

I am trying to use frontools to compile my Magento theme. Before I used the standard grunt workflow but it is very slow as you might know.

I installed https://github.com/SnowdogApps/magento2-frontools as described and executed gulp setup

I also customied the tools/helper/less.js by adding gulp-debug

[ ... Around line 37 ]

var debug = require('gulp-debug');
return gulp.src(lessFiles)
  .pipe(debug({title: 'unicorn:'}))
  .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))

[...]

Output is

$ gulp styles --theme example
[18:07:09] Using gulpfile ~/my/workspace/example.de/vendor/snowdog/frontools/gulpfile.js
[18:07:09] Starting 'styles'...
[18:07:09] Starting 'less:example:en_US'...
[18:07:10] Starting 'less:example:de_DE'...
[18:07:10] Finished 'styles' after 1.24 s
[18:07:10] unicorn: 0 items
[18:07:10] unicorn: 0 items
[18:07:10] Finished 'less:example:en_US' after 1.25 s
[18:07:10] Finished 'less:example:de_DE' after 92 ms

my theme.json

{
    "backend": {
      "src": "app/design/adminhtml/Magento/backend",
      "dest": "pub/static/adminhtml/Magento/backend",
      "locale": [
        "en_US"
      ],
      "lang": "less",
      "default": true,
      "area": "adminhtml",
      "vendor": "Magento",
      "name": "backend",
      "files": [
        "css/styles-old",
        "css/styles"
      ]
    },
    "blank": {
      "src": "vendor/magento/theme-frontend-blank",    <---- i have change this, with app/design also it was not working 
      "dest": "pub/static/frontend/Magento/blank",
      "locale": [
        "en_US"
      ],
      "lang": "less",
      "default": true,
      "area": "frontend",
      "vendor": "Magento",
      "name": "blank",
      "files": [
        "css/styles-m",
        "css/styles-l",
        "css/email",
        "css/email-inline"
      ]
    },
    "luma": {
      "src": "app/design/frontend/Magento/luma",
      "dest": "pub/static/frontend/Magento/luma",
      "locale": [
        "en_US"
      ],
      "lang": "less",
      "default": true,
      "area": "frontend",
      "vendor": "Magento",
      "name": "luma",
      "files": [
        "css/styles-m",
        "css/styles-l"
      ]
    },
    "example": {
      "src": "app/design/frontend/Example/default",
      "dest": "pub/static/frontend/Example/default",
      "locale": [
        "en_US",
        "de_DE"
      ],
      "parent": "blank",
      "lang": "less",
      "area": "frontend",
      "vendor": "Example",
      "name": "default",
      "files": [
        "css/styles-m",
        "css/styles-l"
      ]
    },
    "sass-blank": {
      "src": "vendor/snowdog/theme-blank-sass",
      "dest": "pub/static/frontend/Snowdog/blank",
      "locale": [
        "en_US",
        "pl_PL"
      ],
      "lang": "scss",
      "postcss": [
        "plugins.autoprefixer()"
      ]
    },
    "sass-custom": {
      "src": "vendor/snowdog/theme-custom",
      "dest": "pub/static/frontend/Snowdog/custom",
      "parent": "sass-blank",
      "locale": [
        "en_US",
        "pl_PL"
      ],
      "lang": "scss",
      "postcss": [
        "plugins.autoprefixer()"
      ]
    }
}