cancel
Showing results for 
Search instead for 
Did you mean: 

How to add a custom CSS file in Magento 2

SOLVED

How to add a custom CSS file in Magento 2

when i am adding custom css file in magento 2.1.4 i am getting these error how resolve it

Unable to resolve the source file for 'frontend/sample-module-theme/sample/en_US/css/custom.css'
#0 D:\xampp\htdocs\magento3\vendor\magento\framework\App\StaticResource.php(97): Magento\Framework\View\Asset\File->getSourceFile()
#1 D:\xampp\htdocs\magento3\vendor\magento\framework\App\Bootstrap.php(258): Magento\Framework\App\StaticResource->launch()
#2 D:\xampp\htdocs\magento3\pub\static.php(13): Magento\Framework\App\Bootstrap->run(Object(Magento\Framework\App\StaticResource))
#3 {main}
1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to add a custom CSS file in Magento 2

@Dileep123


Why don't you use .LESS CSS so it is compiled into one style.css file? 

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

View solution in original post

8 REPLIES 8

Re: How to add a custom CSS file in Magento 2

Can you paste complete path to your CSS file where have you saved it, for example:

app/code/vendor/module/view/frontend/web/css/mycss.css

 

Also, paste layout XML content.

If this response was helpful to you, consider giving kudos to this post.
If this response solved your problem, click accept as solution to help others solve this issue

Re: How to add a custom CSS file in Magento 2

this is the path of where style sheet saved

app/design/frontend/vendorname/theme/web/css/custom.css

app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

 

<css src="css/custom.css" order="100"/>

 

added code like this

 

Re: How to add a custom CSS file in Magento 2

@Dileep123


Why don't you use .LESS CSS so it is compiled into one style.css file? 

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

Re: How to add a custom CSS file in Magento 2

@ShoaibRehman89

 

yes i am created _theme.less file and generated  _theme.css file and as well it's updating style-m.css and style-i.css if i am refresh the page styles not loading even after compile also not loading everytime i need to run the command

php bin/magento setup:static-content:deploy
 

then only styles adding

Re: How to add a custom CSS file in Magento 2

@Dileep123

 

Can you check that you are deploying static content for your store locale. By default, Magento deploys static content for en_US unless specified otherwise. 

 

 

Secondly, make sure that you flush magento cache.

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

Re: How to add a custom CSS file in Magento 2

hello i also try to call my custom.css but its not reflacting after success of deploy even flush the cache please help if some one know i m using 2.2.1 version

Re: How to add a custom CSS file in Magento 2

Hi,

If you want to add the JS and CSS file from a custom module in Magento 2, you can use this way.

 

1. Add the CSS file.
- Create the file _module.less in the path app\code\PHPCuong\BannerSlider\view\frontend\web\css\source
- Import the less file from your file

 

2. Add the JS file.
- Create the file requirejs-config.js in the path app\code\PHPCuong\BannerSlider\view\frontend
- Map the JS file

 

3. Deploy the static content again.
- php bin/magento setup:upgrade
- php bin/magento setup:static-content:deploy

 

4. Test and see the results
- php bin/magento cache:flush

 

You can see this video https://www.youtube.com/watch?v=JGli227W1ks

A tutorial detail about How to add the JS and CSS files into a custom module in Magento 2

You can get the source code on the github https://github.com/php-cuong/magento2-banners-slider

 

I hope it will save your time.

Re: How to add a custom CSS file in Magento 2

Thank you very much! this is working.