1

new Magento2 installation, went through a whole series of learning where I could not figure out why my default head blocks xml wasn't working to load my custom css/js files... as per the new theme in the documentation.

After re-going over the code, there was nothing wrong... by trial & error,

I figured out that if I made my new theme inherit from magento/blank, then my custom css & js would load... but if I inherit from magento/luma, it would not... so... my question is HOW can I use the Luma theme and then just modify it to suit needs, it's a great starting point, and would cut out weeks of development if we could use this.

So, I created a new theme, and inherit from luma like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>CVPStyle4</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

then I go and regenerate static files via deploy, and my theme is in the backend, and I activate it and it looks like luma, but it does NOT load my custom css/js files, or anything in the default_head_blocks.xml

inside: app > design > frontend > myvendor > mytheme > Magento_Theme > layout

and here's my code in that xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    
    <!--Custom Styles-->
    <css src="css/cvpstyle.css" />
    
    <!--Before-After Script-->
    <link src="js/jquery.twentytwenty.js"/>
    <link src="js/jquery.event.move.js"/>
    
    <!--Font Awesome-->
    <css src="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" src_type="url" />
</head>
</page>

and no matter how I do it, it will not load and work.

How can I inherit from luma and add some css/js to customize it?

note

I have tried copying the entire luma theme from:

vendor > magento > theme-frontend-luma and then changing the name and such in composer.json, registration.php, and theme.xml - theme sort of loads, (doesn't look quite right) - and STILL won't load any custom CSS/JS from the default_head_blocks.xml

any thoughts? I'd really like to use luma as a base. Thanks!

Improve this question

1 Answer 1

Reset to default
2

First ensure that your store is in 'developer' mode then ensure the case of your theme that should be: VendorName > theme_name

Then since you are working in dev mode ensure to delete these folders (between every change)

var/cache - you can deactivate some cache to avoid remove that
var/page_cache - you can deactivate some cache to avoid remove that
var/view_processed
pub/static/frontend/{VendorName}

As I say recently in other answer... yes frontend development in M2 is a pain in the back.

Improve this answer

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.