将css / scss文件导入到类中

时间:2014-06-19 13:11:08

标签: css sass

我有问题。我在liferay中使用vaadin。我已经成功地为vaadin写了一个完全响应(是的,表也是)主题,基于bootstrap。现在我将它导入liferay。一切都很顺利'直到我需要升级Liferay,他们的新响应主题使用相同的类名作为bootstrap,但具有不同的行为(悲伤,非常悲伤的脸)。

我到目前为止所考虑的解决方案是将一个类应用于vaadin编译的css,如:

.daVaadinTheme {
    @import bootstrap.css;   
}

所以内容将编译为:

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

但是,正如你可能想到的那样,显然不起作用。

你有解决方案吗?

仔细阅读!这与您发布的答案不重复。我正在尝试在另一个文件的CSS / SCSS类中导入一个CSS文件,就像我上面写的那个例子。我的问题不是简单地将CSS文件导入另一个...

解决方案:(对MathiasJørgensen的称赞)

使用另一个scss文件中的@import:

在test.scss中:

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

3 个答案:

答案 0 :(得分:1)

您需要将代码移至Id

mixin

然后,您可以导入普通:

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

或上下文:

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

答案 1 :(得分:1)

使用下划线命名内部文件,并以scss结尾。 。是的,即使是普通的css,即foo.css_foo.scss

像这样有一个外部文件:

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

<强>理由:

  • import仅适用于css
  • 下划线 - 文件被sass跳过(也在gulp.src(<some wildcards).sass()
  • 如果你对你的回购没有任何关于css文件名的影响。或者它是升级的主要痛苦,考虑在.scss扩展名下使用符号链接......

答案 2 :(得分:0)

如果您想使用sass / scss为某个类添加某些样式,我认为您正在寻找的是

.myClass { @import bootstrap.css; }