Skip to content

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}

暂时不支持远程样式文件的导入。