我有问题。我在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";
}
答案 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';
}
<强>理由:强>
gulp.src(<some wildcards).sass()
)答案 2 :(得分:0)
如果您想使用sass / scss为某个类添加某些样式,我认为您正在寻找的是
.myClass { @import bootstrap.css; }