将 css/scss 文件导入到类中答案

【问题标题】：Import css/scss file into a class将 css/scss 文件导入到类中
【发布时间】：2014-08-10 01:00:28
【问题描述】：

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

到目前为止我想到的解决方案是将一个类应用于 vaadin 编译的 css，例如：

.daVaadinTheme {
    @import bootstrap.css;   
}

所以内容将被编译为：

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

但是，正如您可能发现的那样，它显然不起作用。

你有什么解决办法吗？

仔细阅读！这不是您发布的答案的副本。我正在尝试在另一个文件的 CSS/SCSS 类中导入一个 CSS 文件，就像我上面写的示例一样。我的问题不是简单地在另一个文件中导入一个 CSS 文件......

解决方案：（感谢 Mathias Jørgensen）

使用来自另一个 scss 文件的 @import：

在 test.scss 中：

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

【问题讨论】：

这个 .daVaadinTheme {@import bootstrap.css;} 在 .scss 文件中吗？
在这种情况下，正确的语法是 @import 'path-to-your-file/_bootstrap.scss';将下划线和 .scss 扩展名添加到 bootstrap.css - 我不确定输出结果
请考虑将您的解决方案作为答案发布，人们通常会在答案部分搜索解决方案。

标签： css sass

【解决方案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()）
如果您对您的 repo 中的 css 文件名没有任何影响。或者这是升级的主要痛苦，请考虑在 .scss 扩展名下使用符号链接...

【讨论】：

【解决方案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"
}

【讨论】：

我认为比上一个回复更好

【解决方案3】：

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

.myClass { @import bootstrap.css; }

【讨论】：

试过了，但 sass 不接受...我都试过了，有和没有顶点。
尝试使用 bootstrap.sass 和 @include 来代替
它不工作。它不应该。 bootstrap css 不会被封装，只会在顶层导入。