1

I am looking to change some css settings on my Magento 2.1.8 store.

I understand that this file is created using .less files, but which less files is this made up of and where can i find them?

Thanks.

4 Answers 4

2

After deploying static view files, if you check this file:

[your Magento install dir]/var/view_preprocessed/css/frontend/[vendor name]/[theme name]/en_US/css/styles-m.less

inside you will see a list of all .less files that were used to create the final version of your styles-m.css.

For example, in Luma theme (Magento 2.1.8) the file is located here: /var/view_preprocessed/css/frontend/Magento/luma/en_US/css/styles-m.less. Inside you can see the following list of files:

@import 'source/_reset.less';
@import '_styles.less';
@import (reference) 'source/_extends.less';

@import '../Magento_Braintree/css/source/_module.less';
@import '../Magento_CatalogEvent/css/source/_module.less';
@import '../Magento_Multishipping/css/source/_module.less';
@import '../Magento_Paypal/css/source/_module.less';
@import '../Magento_ProductVideo/css/source/_module.less';
@import '../Magento_SalesRule/css/source/_module.less';
@import '../Magento_Weee/css/source/_module.less';
@import '../Magento_AdvancedCheckout/css/source/_module.less';
@import '../Magento_AdvancedSearch/css/source/_module.less';
@import '../Magento_Bundle/css/source/_module.less';
@import '../Magento_Catalog/css/source/_module.less';
@import '../Magento_CatalogSearch/css/source/_module.less';
@import '../Magento_Checkout/css/source/_module.less';
@import '../Magento_Customer/css/source/_module.less';
@import '../Magento_CustomerBalance/css/source/_module.less';
@import '../Magento_Downloadable/css/source/_module.less';
@import '../Magento_GiftCard/css/source/_module.less';
@import '../Magento_GiftCardAccount/css/source/_module.less';
@import '../Magento_GiftMessage/css/source/_module.less';
@import '../Magento_GiftRegistry/css/source/_module.less';
@import '../Magento_GiftWrapping/css/source/_module.less';
@import '../Magento_GroupedProduct/css/source/_module.less';
@import '../Magento_Invitation/css/source/_module.less';
@import '../Magento_LayeredNavigation/css/source/_module.less';
@import '../Magento_Msrp/css/source/_module.less';
@import '../Magento_MultipleWishlist/css/source/_module.less';
@import '../Magento_Newsletter/css/source/_module.less';
@import '../Magento_Review/css/source/_module.less';
@import '../Magento_Reward/css/source/_module.less';
@import '../Magento_Rma/css/source/_module.less';
@import '../Magento_Sales/css/source/_module.less';
@import '../Magento_SendFriend/css/source/_module.less';
@import '../Magento_Theme/css/source/_module.less';
@import '../Magento_Vault/css/source/_module.less';
@import '../Magento_Wishlist/css/source/_module.less';

@import 'source/_widgets.less';
@import '../Magento_Banner/css/source/_widgets.less';
@import '../Magento_Catalog/css/source/_widgets.less';
@import '../Magento_CatalogEvent/css/source/_widgets.less';
@import '../Magento_Cms/css/source/_widgets.less';
@import '../Magento_GiftRegistry/css/source/_widgets.less';
@import '../Magento_MultipleWishlist/css/source/_widgets.less';
@import '../Magento_Reports/css/source/_widgets.less';
@import '../Magento_Sales/css/source/_widgets.less';
@import '../Magento_VersionsCms/css/source/_widgets.less';
@import '../Magento_AdvancedCheckout/css/source/_widgets.less';

@import 'source/lib/_responsive.less';

@media-target: 'mobile'; // Sets target device for this file

@import 'source/_theme.less';

@import 'source/_extend.less';
1

It seems like you are looking for the file located here:-

vendor\magento\theme-frontend-blank\web\css\styles-m.less

1

If you are using custom theme then file located on following path:

app/design/frontend/[VendorName]/[themename]/web/css/styles-m.less

-1

Kindly review below link may be that will help you.

https://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

To change less file you need to install node js and grunt.

Kindly review below link for that. http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.