Magento 2: How to override gallery.css?

Question

I want to override lib/web/mage/gallery/gallery.less and some module files in

lib/web/mage/gallery/module/*.less

I need to override them because I want to change the style of product gallery images.

How to override or Are there any other way to "settle the question"?

Answer 1

We can override the less file lib in our custom theme. Put this file under web folder:

app/design/frontend/{Vendor}/{Theme}/web/mage/gallery/gallery.less

and add mage/gallery/gallery in PROJECT/dev/tools/grunt/configs/themes.js (or PROJECT/dev/tools/grunt/configs/local-themes/themes.js for magento 2.2) to make grunt compiling it as well.

• Mr Tim: Thanks you for answer, but I try it, seem it not work. I had already remove cache and static files, deploy again, It didn't work.
• Khoa Truong: You should read more: magento.stackexchange.com/questions/110164/…
• Mr Tim: Thanks a lot! But I read a check it agian, They are only work with less files in lib/web/css/source. Can you please help me check again?
• Khoa Truong: @MrTim you should try app/design/frontend/{Vendor}/{Theme}/web/css/source/lib/mage/gallery/gallery.less
• Mr Tim: Thanks in advanced. I had try it, when I deploy it said that: Compilation from source: /app/design/frontend/{Vendor}/{theme_name}/web/css/source/lib/mage/gallery/gallery.less Compilation from source: frontend/{Vendor}/{theme_name}/en_US/css/source/lib/mage/gallery/gallery.less Unable to get content for 'frontend/{Vendor}/{theme_name}/en_US/css/source/lib/mage/gallery/module/_variables.less'

Answer 2

In your custom config file for Grunt add path to gallery file: 'mage/gallery/gallery' along with 'css/styles-m' and 'css/styles-l'