How to add a custom CSS file in Magento 2

[Dileep123]

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}

[Sinisa]

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.

[Dileep123]

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

[ShoaibRehman89 · Accepted solution]

@Dileep123

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

[Dileep123]

@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

[ShoaibRehman89]

@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.

[kinjaljm]

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

[PHPCuong]

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.

[dasunsewwanda]

Thank you very much! this is working.