Sass 团队似乎已在 Sass 3.4 中删除了此功能,但我尝试为 Semantic UI CSS 库命名,以免与其他库发生冲突,并且它不起作用。
.semantic-namespace {
@import "semantic-ui-css/semantic.min.css";
}
我收到此错误
error sass/semantic-namespace.scss (Line 3: CSS import directives may only be used at the root of a document.)
似乎是说我只能在顶部使用@import。
找到了一些几年前的文档,但我认为它们太旧了,而且有些东西已经发生了变化。
最佳答案
使用下划线命名您的内部文件,并以 scss 结尾。是的,即使它是纯CSS,即semantic.min.css → _semantic.min.scss
有一个像这样的外部文件:
#main .content { // if that's, where you want them to rule only
@import 'semantic.min';
}
长话短说,语法如下:
导入(包含)原始 CSS 文件
语法末尾没有 .css
扩展名(导致实际读取部分 s[ac]ss|css 并将其内联到 SCSS/SASS):
@import "semantic.min";
以传统方式导入 CSS 文件 语法采用传统方式,末尾带有 .css 扩展名(结果为 @import url("semantic.min.css"); 在编译的 CSS 中):
@import "semantic.min.css";
这真是太棒了:这种语法优雅而简洁,而且向后兼容!它与 libsass 和 node-sass 配合得很好。
关于css - 对于 Sass 如何为 css 文件命名空间以免与其他 css 框架发生冲突?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51828484/