Magento 2 add custom css to custom theme file

Question

I created a custom less file in

\app\design\frontend\Vendor\theme\web\css\source

I don't know how to compile it and how to imports this file in style-l.css

please give your suggestions

Answer 1

For custom less use _extend.less this will import all your style in style-l.css

Create _extend.less and place at below location in your extended theme module

app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

After adding your less styles here , run following commands to compile it to style-l.css

In developer mode

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

In Production Mode

php bin/magento setup:upgrade

php bin/magento deploy:mode:set production

Keep your cache disabled or flush your cache

Answer 2

Place your custom css in your-theme/web/css and add your css in

your-theme/Magento_Theme/layout/default_head_blocks.xml 

before styles-m.css like

<css src="css/custom.css" media="screen and (min-width: 1px)"/>

and then deploy the static content

also on the developer mode to avoid to deploy the content again and again