Magento 2: CSS Blocked Due to MIME Type Mismatch

catalogcssmagento2products

I have just added custom CSS in the app/Vendor/theme/Magento_Catalog/web/css/custom.css

After that, I have run the CLI command php bin/magento setup:static-content:deploy and clear the cache.

When I refresh the page I have found the below issue:

The resource from
“http://localhost/mageento2/pub/static/version1488530702/frontend/Vendor/theme/en_US/Magento_Catalog/css/custom.css”
was blocked due to MIME type mismatch (X-Content-Type-Options:
nosniff).

After that I have researched this issue and found the answer in below link:

Magento2 CSS was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

I have changed settings already app/etc/di.xml after install the magento. Also, Changed the settings in Configuration Stores => Configuration => Advanced => Developer => Template Settings and change Allow Symlinks => No.

Also, when I go to the app\pub\static\frontend\Vendor\deom\en_US\Magento_Catalog, I couldn't found my custom.css file.

I have included this CSS in the app\design\frontend\Vendor\theme\Magento_Catalog\layout\catalog_product_view.xml

Please see the below is code of .XML file:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <css src="Magento_Catalog::css/magnific-popup.css" />
  </head>
    <body>
        <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.js" as="custom.js" template="Magento_Catalog::product/js.phtml"/>
    </referenceContainer>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.review" destination="product.info.main" before="product.info.price"/>
    </body>
</page>

I have put the CSS file in this directory app\pub\static\frontend\Vendor\theme\en_US\Magento_Catalog\css\custom.css

Can anyone describe why this issue is occurring? So, we can aware of this issue in future.

I have installed Magento ver. 2.1.3. Please help..

Best Answer

Override the below file in your theme

magento\vendor\magento\module-catalog\view\frontend\layout\catalog_product_view.xml

Add your css under gallery.css

<head>
    <css src="mage/gallery/gallery.css"/>
    <css src="<path>/custom.css"/>
</head>
Related Topic