Question

我有问题。我在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";
}

Answer 1

您需要将代码移至Id：

mixin

然后，您可以导入普通：

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

或上下文：

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

Answer 2

使用下划线命名内部文件，并以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扩展名下使用符号链接......

Answer 3

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

.myClass { @import bootstrap.css; }

将css / scss文件导入到类中

3 个答案: