4

I have put gallery.less and calendar.css in web\mage\gallery and web\mage respectively in my custom theme, But they are not compile with grunt.

How can i compile these files with grunt like other modules and web\css\source less files ?

4

please follow below step to compile "gallery.less"

  1. create "mage" folder under your theme
  2. copy "gallery" folder from "root/lib/web/mage/gallery/" and put under "app/design/frontend/vendor(packagename)/your-theme(custom theme)/web/mage/"
  3. open "root/dev/tools/grunt/configs/theme.js" and put below code in it (configure your theme in "theme.js")

    theme: {
    area: 'frontend',
    name: 'vendor/your-theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'mage/gallery/gallery',
    ],
    dsl: 'less'
    

    }

please follow below step to compile "calendar.css"

  1. create "mage" folder under your theme
  2. cteate "calendar.less" file under ("root/lib/web/mage/calendar.less") file.
  3. copy all content from "root/lib/web/mage/calendar.css" and put into file "root/lib/web/mage/calendar.less"
  4. open "root/dev/tools/grunt/configs/theme.js" and put below code in it (configure your theme in "theme.js").

**

theme: {
    area: 'frontend',
    name: 'vendor/your-theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'mage/gallery/gallery',
        'mage/calendar',
    ],
    dsl: 'less'
}

**

  1. clean root/var/ and pub/static folder
  2. run grunt exec:theme (your-theme)
  3. run php bin/magento setup:static-content:deploy
  4. run grunt watch:theme (your-theme)
  5. modify "gallery.less", now it is compile through grunt

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.