How to mark third-party styles as @media screen {}

Question

Is there any way to inject (not import) css files into another css file?

I am using less and trying this:

@media screen {
    @import (less) url("../Content/components/bootstrap/dist/css/bootstrap.min.css") screen;
    @import "fanoe.css" screen;
    @import "../Content/components/font-awesome/css/font-awesome.min.css" screen;
    @import "../Content/components/jquery-ui/themes/smoothness/jquery-ui.min.css" screen;
    @import "style.base.less" screen;
}

However the above does not work - the third party styles does not render and my styles are broken because of missing classes.

(The files locations are correct)

The idea is to have all styles markes as media=screen so I want to have all classes within @media screen {}.

So I want to have something like this in the style.css file:

@media screen {
    .bootstrap-class { }
    .font-awesome-class { }
    .custom-class { }
}

etc.

Or any othe idea how to mark third-party styles as @media screen {} is welcome.