How to compile gallery and calendar css with grunt?

Question

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 ?

Answer 1

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