将css/scss文件导入到一个类中 [英] Import css/scss file into a class

问题描述

我有问题.我在liferay中使用vaadin.我已经基于引导程序成功地为vaadin编写了一个完全响应(是的，也有表格)的主题.现在，我将其导入到liferay中.一切正常，直到我升级Liferay为止，他们的新响应主题使用与bootstrap相同的类名称，但行为不同(悲伤，非常悲伤的表情).

I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).

到目前为止，我一直认为的解决方案是将类应用于vaadin编译的CSS，例如:

The solution I've thought so far is to apply a class to the vaadin compiled css, like:

.daVaadinTheme {
    @import bootstrap.css;   
}

所以内容将像这样编译:

so the content will be compiled like:

.daVaadinTheme h1.insideTheFile{

}     
.daVaadinTheme h2.insideTheFile{

}

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

But, as you may figured out, is not obviously working.

您有什么解决办法吗?

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

Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...

解决方案:(对MathiasJørgensen表示敬意)

SOLUTION: (kudos to Mathias Jørgensen)

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

using @import from another scss file:

在test.scss中:

in test.scss:

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

推荐答案

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

Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss

具有如下所示的外部文件:

Have an outer File like so:

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

原因:

• 导入仅适用于CSS
• 下划线文件被sass跳过(也与gulp.src(<some wildcards).sass()一样)
• 如果您在回购中对css文件名没有任何影响.还是升级的主要难题，请考虑在.scss扩展名下使用符号链接...

• import only works with css
• underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
• if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...

这篇关于将css/scss文件导入到一个类中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！