grass-loader 用于编译 grass 模板
options
属性 | Description | Type | Default |
---|---|---|---|
lib | 需要用到的 grass 库 | string | @rustle/grass |
needGrass | 是否自动 import grass | boolean | false |
template 字符与注释
用两种方法导出 template,通过注释的方式,会把需要的目标方法或字符串替换到特定的注释地方
- template method
// #temp method/* #temp method */ 可以简写为: // #temp/* #temp */
- template string
// #temp string/* #temp string */
demo:
阻止编译
对于不想要参与编译的文件,可以通过 // #no compile
来阻止编译,但这行阻止编译的注释只能放在文件的最前面
demo:
// #no compile...
几种 grass 文件的格式
- 一种为
template
和script
标签都齐全的文件格式,这个时候template
注释才有作用 - 如果只有
template
标签,那么这个标签会默认当成一个无状态组件,这个时候有两个属性供你使用,name
和styleSrc
<!-- name 为组件的名称 --><!-- styleSrc 为需要的 css 文件,需要开启 cssmodules, 这样就可以配合 grass 使用 styleName -->
- 如果只有
script
标签,那么会作为纯js
文件来处理,但,needGrass
配置同样生效 - 对于纯
js
文件,template
和script
标签都不存在的情况下,会跳过编译,needGrass
配置将不会生效
使用
demo:
test: /\.grs$/ use: loader: 'grass-loader' options: needGrass: true exclude: /node_modules/
扩展
多以可以在 grs
文件中获得 template
字符串,当然可以可以进行更改