Magento 2.1 – Include Module’s CSS and JS Files

magento-2.1

I have created a basic plugin in magento 2 and also included .css file in correct place as I have seen in many tutorials but when I open frontend page of magento 2(luma page) and do page inspect and in the console after open the issue in tab , it shows :- Unable to resolve the source file for 'frontend/Magento/luma/en_US/Excellence_Hello/css/style.css'

#0 C:\xampp\htdocs\magento\vendor\magento\framework\App\StaticResource.php(97): Magento\Framework\View\Asset\File->getSourceFile()
#1 C:\xampp\htdocs\magento\vendor\magento\framework\App\Bootstrap.php(258): Magento\Framework\App\StaticResource->launch()
#2 C:\xampp\htdocs\magento\pub\static.php(13): Magento\Framework\App\Bootstrap->run(Object(Magento\Framework\App\StaticResource))
#3 {main}

what to do to ??? I am also sharing my extension on's link

Best Answer

Wrong directory path in your layout file. You keep css and js both in view/frontend/web but in your layout file you mentioned view/frontend/web/css and view/frontend/web/js so it will throw above error

in your layout file change source path like below

<css src="Excellence_Hello::style.css"/>
<script src="Excellence_Hello::style.js"/>

opinion: This is not a good practice to add js. refer this link to add js

Related Solutions

Magento 2.1 – How to Modify style.css

You need to change in style.less or style.css in your theme folder and then deploy content as follows.

php bin/magento setup:static-content:deploy

You need to run above command from Magento 2 root directory.

Magento – Unable to resolve the source file for error in custom theme

Because that file sizes.js is not belong to frontend scope. It belongs to adminhtml.

magento/module-configurable-product/view/adminhtml/web/js/variations/paging/sizes.js

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'Magento_Ui/js/grid/paging/sizes'
], function (Sizes) {
    'use strict';

    return Sizes.extend({
        defaults: {
            excludedOptions: ['100', '200']
        },

        /**
         * @override
         */
        initialize: function () {
            this._super();

            this.excludedOptions.forEach(function (excludedOption) {
                delete this.options[excludedOption];
            }, this);
            this.updateArray();

            return this;
        }
    });
});

Solution for your problem is delete any references to sizes.js in your custom theme. And asks the vendor to fix it, obviously :)

Best Answer

Related Solutions

Magento 2.1 – How to Modify style.css

Magento – Unable to resolve the source file for error in custom theme

Related Topic