将css / scss文件导入一个类

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, ie 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...

Answer 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"
}

Answer 3

如果您想使用sass / scss向类中添加某些样式，我想您正在寻找的是

.myClass { @import bootstrap.css; }