Import css/scss file into a class

Question

I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).

The solution I've thought so far is to apply a class to the vaadin compiled css, like:

.daVaadinTheme {
    @import bootstrap.css;   
}

so the content will be compiled like:

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

But, as you may figured out, is not obviously working.

Do you have any solution?

Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...

SOLUTION: (kudos to Mathias Jørgensen)

using @import from another scss file:

in test.scss:

.daVaadinTheme{
    @import "bootstrap.scss";
}

Answer 1

Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss

Have an outer File like so:

#main .content {  // if that's, where you want them to rule only
    @import 'foo';
}

Reasons:

• import only works with scss
• underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
• if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...