将css/scss文件导入到类中

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

用下划线命名您的内部文件，并以 scss 结尾。. 是的，即使它是普通的 css，即foo.css？_foo.scss

有一个像这样的外部文件：

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

原因：

• 导入仅适用于 css
• 下划线文件很高兴被 sass 跳过（也如 gulp.src(<some wildcards).sass()）
• 如果您对 css 文件名的 repo 没有任何影响。或者这是升级的主要痛苦，请考虑使用 .scss 扩展名下的符号链接......

Answer 2

您需要将代码移动到mixin：

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

然后，您可以正常导入：

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

或上下文：

// test.scss
@import "bootstrap"; // No extension

.daVaadinTheme {
  @include bootstrap; // The name of "mixin"
}

Answer 3

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

.myClass { @import bootstrap.css; }