We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在magix项目中,样式被分为以下3大类
view样式是配合当前区块而存在的样式,编辑器会对样式内容做编译,样式范围仅在当前view中生效,不会影响到其它view。
在javascript文件中,通过applyStyle进行关联,如
javascript
applyStyle
import Magix5 from 'magix5'; Magix5.applyStyle('@:./user.less');
如果样式文件中定义的样式没有被使用,则编译器会给出提示,同样的,如果html中按一定规则找不到选择器定义在哪个样式文件中,同样会给出提示
通过对编译器配置scopedCss,指定当前项目中使用的全局样式,这个全局样式是会被编译器编译转换的。 如
scopedCss
全局样式
magixConposer.config({ scopedCss: [ './tmpl/g.less', './tmpl/app/test.css' ] });
这个样式文件之所以要提前通过配置的方式告诉编译器是因为:编译器需要对整个项目作编译后,才能给出哪些样式没有被使用到,或html中使用了哪些未声明的样式,因此在编译之前就需要知道哪些文件是项目级别的全局样式
html
项目级别的全局样式
全局样式是不被编译器编译处理的样式。即当前项目中可能通过link标签引入了其它样式文件,但对于编译器来讲是不知道的,编译器照例会对项目中的html文件编译处理,在遇到编译器认为未定义的样式时,会给出提示。
link
例: 用户在入口页面自行引入了bootstrap.css,然后在某个view中使用如col-md-4
bootstrap.css
col-md-4
<div class="col-md-4"> </div>
对于编译器来讲,通过前面讲的项目的全局样式及view附属的样式如果找不到col-md-4,则认为用户使用了未定义的选择器。毕竟编译器在这种情况下是不清楚用户到底是写错了,还是在引用一个全局样式,但为了安全,编译器会给出提示。
全局
view
开发者可以忽略这个提示,也可以进行配置,忽略掉一些提示,如
magixComposer.config({ checker:{ tmplClassCheck(selector) { return !selector.startsWith('mx5-'); } } });
如果编译器找不到样式的定义,且不为mx5-开头的样式规则,则进行提示
mx5-
前面所讲的都是先定义后使用的方式,即开发者要先创建样式文件,书写样式规则后,在html中使用。而现在的开发中,样式越来越多的倾向到原子化的规则上来,同时可以通过原子化的名称,反推出样式内容,样式的即时编译也将成为主流,magix-composer现已支持样式的却时编译
magix-composer
即时编译无须创建、书写样式规则后再使用,而时直接使用,由编译器反推出样式内容。先使用后定义。
即时编译更自由,同时维护也更方便,比如一些模块中部分html下线,如果使用即时编译,则只需要删除html即可,如果像之前的先定义后使用,则需要自己去相应的样式文件中,删除关联的样式。
即时编译只需要记住原子化的规则,或反推样式内容的规则即可,而之前的先定义后使用,每次使用样式时,如果不确定有没有定义,则需要自己去相应的样式文件中查找。
那么在magix项目中如何使用样式的即时编译呢?
magix
通过前面所讲的样式分类,编译器会对样式及html的使用进行检测,只有无法找到定义的样式时,才会走即时编译。
编译器会通过cssJITGenerator钩子抛出无法识别的样式规则,外部根据样式名称,返回相应的样式内容即可,如
cssJITGenerator
magixComposer.config({ cssJITGenerator(selector){ if(selector=='bg-white'){ return `.${selector}{background-color:#fff}`; } return false; } });
我们对cssJITGenerator返回值进行讨论下 如果cssJITGenerator返回true,表示无须对这个选择器生成相应的内容,同时也不需要进行检测提示。如果返回false、null、undefined或空字符串,则表示无法对这个选择器生成相应的内容,同时编译器在编译结束时,会给出检测提示,提示开发者进行修改。其它字符串内容则表示根据选择器生成了相应的样式规则。
true
false
null
undefined
空字符串
字符串
即时编译仅对无法处理的样式名称做处理
如下示例
/*user.css*/ .bg-white{ background-color:#fff; }
<!--user.html--> <div class="bg-white"> </div>
//user.ts import Magix5 from'magix5'; let {applyStyle,View}=Magix5; applyStyle('@:./user.css'); export default View.extend({ tmpl:'@:./user.html', });
在user.html中,使用的bg-white因为在user.css可以找到,则不会走即时编译。
user.html
bg-white
user.css
<div class="bg--{{=type}}"></div>
style
项目全局样式
The text was updated successfully, but these errors were encountered:
No branches or pull requests
分类
view样式
view样式是配合当前区块而存在的样式,编辑器会对样式内容做编译,样式范围仅在当前view中生效,不会影响到其它view。
在
javascript
文件中,通过applyStyle
进行关联,如如果样式文件中定义的样式没有被使用,则编译器会给出提示,同样的,如果html中按一定规则找不到选择器定义在哪个样式文件中,同样会给出提示
项目全局样式
通过对编译器配置
scopedCss
,指定当前项目中使用的全局样式,这个全局样式
是会被编译器编译转换的。如
这个样式文件之所以要提前通过配置的方式告诉编译器是因为:编译器需要对整个项目作编译后,才能给出哪些样式没有被使用到,或
html
中使用了哪些未声明的样式,因此在编译之前就需要知道哪些文件是项目级别的全局样式
全局样式
全局样式是不被编译器编译处理的样式。即当前项目中可能通过
link
标签引入了其它样式文件,但对于编译器来讲是不知道的,编译器照例会对项目中的html
文件编译处理,在遇到编译器认为未定义的样式时,会给出提示。例:
用户在入口页面自行引入了
bootstrap.css
,然后在某个view中使用如col-md-4
对于编译器来讲,通过前面讲的项目的
全局
样式及view
附属的样式如果找不到col-md-4
,则认为用户使用了未定义的选择器。毕竟编译器在这种情况下是不清楚用户到底是写错了,还是在引用一个全局样式,但为了安全,编译器会给出提示。开发者可以忽略这个提示,也可以进行配置,忽略掉一些提示,如
如果编译器找不到样式的定义,且不为
mx5-
开头的样式规则,则进行提示前面所讲的都是先定义后使用的方式,即开发者要先创建样式文件,书写样式规则后,在
html
中使用。而现在的开发中,样式越来越多的倾向到原子化的规则上来,同时可以通过原子化的名称,反推出样式内容,样式的即时编译也将成为主流,magix-composer
现已支持样式的却时编译即时编译
即时编译无须创建、书写样式规则后再使用,而时直接使用,由编译器反推出样式内容。先使用后定义。
即时编译更自由,同时维护也更方便,比如一些模块中部分
html
下线,如果使用即时编译,则只需要删除html
即可,如果像之前的先定义后使用,则需要自己去相应的样式文件中,删除关联的样式。即时编译只需要记住原子化的规则,或反推样式内容的规则即可,而之前的先定义后使用,每次使用样式时,如果不确定有没有定义,则需要自己去相应的样式文件中查找。
那么在
magix
项目中如何使用样式的即时编译呢?通过前面所讲的样式分类,编译器会对样式及
html
的使用进行检测,只有无法找到定义的样式时,才会走即时编译。编译器会通过
cssJITGenerator
钩子抛出无法识别的样式规则,外部根据样式名称,返回相应的样式内容即可,如我们对
cssJITGenerator
返回值进行讨论下如果
cssJITGenerator
返回true
,表示无须对这个选择器生成相应的内容,同时也不需要进行检测提示。如果返回false
、null
、undefined
或空字符串
,则表示无法对这个选择器生成相应的内容,同时编译器在编译结束时,会给出检测提示,提示开发者进行修改。其它字符串
内容则表示根据选择器生成了相应的样式规则。即时编译仅对无法处理的样式名称做处理
如下示例
在
user.html
中,使用的bg-white
因为在user.css
可以找到,则不会走即时编译。暂时无法解决的问题
<div class="bg--{{=type}}"></div>
这种情况很难反推相应的样式style
中写原生规则差不太多,看原子化名称怎么定义及反推样式规则项目全局样式
The text was updated successfully, but these errors were encountered: