将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文件...

- Edoardoo

---

这个 .daVaadinTheme {@import bootstrap.css;} 是在一个 .scss 文件中吗？ - valerio0999

在这种情况下，正确的语法是 @import 'path-to-your-file/_bootstrap.scss'; 将下划线和 .scss 扩展名添加到 bootstrap.css 中 - 不过我不确定输出结果如何。 - valerio0999

请考虑将您的解决方案发布为答案，因为人们通常在答案部分搜索解决方案。 - Evgenia Karunus

Answer 1

用下划线将内部文件命名，并以scss结尾，即使它只是普通的css，例如foo.css 也要命名为 _foo.scss

外部文件应写成这样：

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

原因：

• 仅支持 scss 导入
• sass 乐意跳过下划线文件（例如在 gulp.src(<some wildcards).sass() 中）
• 如果你无法控制存储库中的 CSS 文件名，或者在更新时会带来很大的麻烦，请考虑在 .scss 扩展名下使用符号链接...

- Frank N

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

- Eduardo Cuomo

---

我认为，这是比之前更好的回复。 - Kim Skogsmo

Answer 3

如果你想使用sass/scss为一个类添加特定的样式，我认为你要找的是：

.myClass { @import bootstrap.css; }

- Mathias Jørgensen

---

尝试过了，但是Sass不接受它...我已经尝试过使用Apex和不使用Apex两种方式。 - Edoardoo

尝试获取bootstrap.sass并使用@include引入它。 - Mathias Jørgensen

它不起作用，而且也不应该。Bootstrap CSS 不会被封装，只会在顶层导入。 - Mykola Riabchenko