Skip to content

Commit bcc1c69

Browse files
author
Treri
committed
docs: update README document
1. remove cssScopedFlag 2. update scoped style usage example
1 parent dd05f5a commit bcc1c69

File tree

1 file changed

+9
-30
lines changed

1 file changed

+9
-30
lines changed

README.md

Lines changed: 9 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ fis.match('src/**.vue', {
3333
// styleNameJoin
3434
styleNameJoin: '', // 样式文件命名连接符 `component-xx-a.css`
3535

36+
extractCSS: true, // 是否将css生成新的文件, 如果为false, 则会内联到js中
37+
3638
// css scoped
37-
ccssScopedFlag: '__vuec__', // 组件scoped占位符
3839
cssScopedIdPrefix: '_v-', // hash前缀:_v-23j232jj
3940
cssScopedHashType: 'sum', // hash生成模式,num:使用`hash-sum`, md5: 使用`fis.util.md5`
4041
cssScopedHashLength: 8, // hash 长度,cssScopedHashType为md5时有效
@@ -116,7 +117,7 @@ fis.match('src/(component/**.css)', {
116117

117118
参考[vue-loader](https://github.com/vuejs/vue-loader)源码,结合fis3的编译特性而编写,下面是parser阶段的主要过程:
118119

119-
1. 解析vue文件,找到其中的`style`,'template','script'标签。
120+
1. 解析vue文件,找到其中的`style`,`template`,`script`标签。
120121

121122
2. 每一个`style`标签创建一个对应的虚拟文件,后缀为`lang`属性指定,默认`css`,你可以指定`less`或其它的后缀。对创建虚拟文件,一样会进行fis3的编译流程(属性`lang`的值决定该文件怎么编译),并加入当前文件的依赖。
122123

@@ -132,36 +133,14 @@ fis.match('src/(component/**.css)', {
132133

133134
> 为了保证每一个组件样式的独立性,是当前组件定义的样式只在当前的组件内生效,引入css scoped机制。
134135
135-
- 在模板的元素上(一般是根节点)加上scoped标志(class,attr,id),默认为`__vuec__`, 你可以通过`cssScopedFlag`自定义。可以加在class,或者属性,或者id。
136-
137-
```html
138-
<template>
139-
<div class="test" __vuec__></div>
140-
<div class="test __vuec__"></div>
141-
</template>
142-
```
143-
144-
- 在样式中使用scoped标志。
145-
146-
```css
147-
.test[__vuec__] {
148-
//
149-
}
150-
// or
151-
.other.__vuec__ {
152-
153-
}
154-
// or
155-
.__vuec__ {
156-
.a {
157-
158-
}
159-
}
160-
```
136+
- 在style标签中使用scoped标志。
161137

162-
- scoped标志会根据文件路径生成唯一的hash字符串(如:`_v-23j232jj` );
138+
```css
139+
<style scoped></style>
140+
<style lang="scss" scoped></style>
141+
```
163142

164-
- 配置:scoped标志默认为`__vuec__`,你可以自定义。
143+
- scoped标志会根据文件路径生成唯一的hash字符串(如:`_v-23j232jj` )
165144

166145
## 测试demo
167146

0 commit comments

Comments
 (0)