Maxim 样式合并
Owenhong edited this page Nov 15, 2016
·
1 revision
样式合并目前默认是开启状态,默认会去处理样式中的有效import规则。
Maxim对于本地样式文件导入未做路径限制,但建议不要使用复杂的路径引用,否则难以维护,建议不要向上跨目录、跨项目引用,向下也最多一级子目录引用。
以import下面3个样式源文件为例,内容如下:
a.css
.aa{
display: block;
width: 20px;
line-height: 100;
}
.aa-1{
display: inline-block;
}
b.css
.bb{
content: 'bb';
background-color: blue;
}
c.css
.cc{
overflow: hidden;
content: 'cc';
}
##一、样式文件同级文件、同级目录及其子目录下的文件import
目录结构:
Before:
@import "a.css";
@import "lib/b.css";
@import "lib/other/c.css";
.a{
background: url("a.png");
}
.b{
display: block;;
opacity: 0.5;
}
After:
.aa{display:block;width:20px;line-height:100}
.aa-1{display:inline-block}
.bb{content:'bb';background-color:#00f}
.cc{overflow:hidden;content:'cc'}
.a{background:url(a.png)}
.b{display:block;opacity:.5}
##二、样式文件的父级目录下的文件、父级目录的子目录下文件import
目录结构:
Before:
@import "../a.css";
@import "../lib/b.css";
@import "../lib/other/c.css";
.a{
background: url("a.png");
}
.b{
display: block;;
opacity: 0.5;
}
After:
.aa{display:block;width:20px;line-height:100}
.aa-1{display:inline-block}
.bb{content:'bb';background-color:#00f}
.cc{overflow:hidden;content:'cc'}
.a{background:url(a.png)}
.b{display:block;opacity:.5}
暂时不支持远程样式文件的导入。