How do I add a css file to the head block in Magento 2 [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Magento Stack Exchange.

Closed 3 years ago.

I'm building a Magento 2 module for learning purposes.
I'm trying to add a css file to all configurable product pages but I'm failing miserably.

Here is what I tried.
In app/code/Namespace/Module/view/frontend/layout I added this file: catalog_product_view_type_configurable.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../Magento/Core/etc/page.xsd">
    <referenceBlock name="head">
        <block class="Magento\Theme\Block\Html\Head\Css" name="namespace-module-css">
            <arguments>
                <argument name="file" xsi:type="string">Namespace_Module:css/styles.css</argument>
            </arguments>
        </block>
    </referenceBlock>
</page>

The layout file is taken into consideration but I get the following error in the console

403 Forbidden - ROOT/pub/static/frontend/Magento/blank/en_US/Namespace_Module:css/styles.css

The file mentioned in the error message does not exist (it is not generated) even if the original file I'm trying to add exists in /app/code/Namespace/Module/view/frontend/web/css/styles.css
If I remove the Namespace_Module prefix from the <argument> tag it includes a different styles.css. The one from pub/static/frontend/Magento/blank/en_US/css/styles.css.

What am I doing wrong?

Answer 1

Ok. I'm a little embarrassed.
The problem was between my keyboard and my chair.
The separator for module name ad file is :: not :.
I should be more careful.
So the correct way to do it is.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../Magento/Core/etc/page.xsd">
    <referenceBlock name="head">
        <block class="Magento\Theme\Block\Html\Head\Css" name="namespace-module-css">
            <arguments>
                <argument name="file" xsi:type="string">Namespace_Module::css/styles.css</argument>
            </arguments>
        </block>
    </referenceBlock>
</page>

I should delete this question as it may seam off topic.
But I will let it live as it may serve as learning material for others.