Import css / scss file to class

Question

I have a problem. I use vaadin inside the lifeguard. I have successfully written a fully responsive (yes, table) theme for vaadin based on bootstrap. Now I import it into liferay. Everything went fine until I had to update Liferay, where their new responsive theme uses the same class names as bootstrap, but with a different behavior (sad, very sad face).

The solution I was thinking so far is to apply the class to compiled css vaadin, for example:

.daVaadinTheme {
    @import bootstrap.css;   
}

therefore, the content will be compiled as follows:

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

But, as you can understand, obviously does not work.

Do you have a solution?

! , . CSS CSS/SCSS , , , . , CSS ...

: ( )

@import scss:

test.scss:

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

Answer 1

scss.. , css, .. foo.css → _foo.scss

:

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

:

• css
• underscore glady sass ( gulp.src(<some wildcards).sass())
• css. , .ssss...

Answer 2

, sass/scss, ,

.myClass { @import bootstrap.css; }

Answer 3

You need to move your code to mixin:

// botstrap.scss
@mixin bootstrap {
  h1.insideTheFile{
  }
  h2.insideTheFile{
  }
}

Then you can import normal:

// test.scss
@import "bootstrap"; // No extension
@include bootstrap; // The name of "mixin"

or with context:

// test.scss
@import "bootstrap"; // No extension

.daVaadinTheme {
  @include bootstrap; // The name of "mixin"
}