Magento 2 - Override luma themes module less file

Question

I try to override css code from the file vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\_cart.less:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .checkout-cart-index {
        .page-main {
            padding-left: @layout__width-xs-indent;
            padding-right: @layout__width-xs-indent;
        }
    }
...

So I created the file in my own theme and made my override

MY_THEME\Magento_Checkout\web\css\source\module\_cart.less.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .checkout-cart-index {
        .page-main {
            padding-left: 35px;
            padding-right: 35px;
        }
    }
}

Then I executed grunt refresh but the change is not getting applied.

Answer 1

I found the answer in the documentation.

I had to create the file MY_THEME\Magento_Checkout\web\css\source\_extend.less

and make my override there.

Answer 2

Did you configured the grunt for you custom theme? If not please refer the below link

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/tools/using_grunt.html

And you don't have configure grunt, You can run the setup upgrade and content deploy.

In my case it working well. Please check here https://prnt.sc/12vd0q7