Import css/scss file into a class

问题:

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:

using @import from another scss file:

in test.scss:

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

回答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 css
• 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...

回答2:

You need move your code into 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" } 

回答3:

If you want to add certain styles to a class using sass/scss I think what you're looking for is

.myClass { @import bootstrap.css; } 

文章来源: Import css/scss file into a class