Skip to content

Commit 635e96c

Browse files
authored
update ja docs and other (#812)
* update scoped use data attribute * update other langulages * update extract css section NOTE: pick up from 5c9b80c * translate previous commit * fix miss-translation
1 parent 25aabe4 commit 635e96c

File tree

4 files changed

+46
-13
lines changed

4 files changed

+46
-13
lines changed

docs/ja/configurations/extract-css.md

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,46 @@
11
# CSS を単一のファイルに抽出する
22

3-
すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
4-
5-
### Webpack 2.x
6-
73
``` bash
84
npm install extract-text-webpack-plugin --save-dev
95
```
106

7+
## 簡単な方法
8+
9+
> vue-loader@^12.0.0 と webpack@^2.0.0 必須
10+
11+
``` js
12+
// webpack.config.js
13+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
14+
15+
module.exports = {
16+
// 他のオプション...
17+
module: {
18+
rules: [
19+
{
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
extractCSS: true
24+
}
25+
}
26+
]
27+
},
28+
plugins: [
29+
new ExtractTextPlugin("style.css")
30+
]
31+
}
32+
```
33+
34+
上記は、`*.vue` ファイル内部の `<style>` のための抽出を自動的に処理し、ほとんどのプリプロセッサでそのまま使えます。
35+
36+
これは、`*.vue` ファイルだけを抽出することに注意してください。JavaScript でインポートされた CSS は、別途設定する必要があります。
37+
38+
## 手動設定
39+
40+
すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
41+
42+
### Webpack 2.x
43+
1144
``` js
1245
// webpack.config.js
1346
var ExtractTextPlugin = require("extract-text-webpack-plugin")

docs/ja/features/scoped-css.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818

1919
``` html
2020
<style>
21-
.example[_v-f3f3eg9] {
21+
.example[data-v-f3f3eg9] {
2222
color: red;
2323
}
2424
</style>
2525

2626
<template>
27-
<div class="example" _v-f3f3eg9>hi</div>
27+
<div class="example" data-v-f3f3eg9>hi</div>
2828
</template>
2929
```
3030

docs/pt_BR/features/scoped-css.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ Para o seguinte:
1818

1919
```html
2020
<style>
21-
.example[_v-f3f3eg9] {
22-
color: red;
23-
}
21+
.example[data-v-f3f3eg9] {
22+
color: red;
23+
}
2424
</style>
2525

2626
<template>
27-
<div class="example" _v-f3f3eg9>hi</div>
27+
<div class="example" data-v-f3f3eg9>hi</div>
2828
</template>
2929
```
3030

@@ -48,4 +48,4 @@ Para o seguinte:
4848

4949
4. **Os estilos com escopo não eliminam a necessidade de classes**. Devido a forma como navegadores processam vários seletores CSS, `p { color: red }` irá ser muitas vezes mais lento quando com escopo \(exemplo: quando combinado com um seletor de atributo\). Se você usa classes ou ids ao invés, como em `.example { color: red }`, então você elimina praticamente esse desempenho atingido. [Aqui está um playground](http://stevesouders.com/efws/css-selectors/csscreate.php) onde você pode testar as diferenças você mesmo.
5050

51-
5. **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que coincide com `.a` contém um componente filho recursivo, então todos os `.b` nesse componente filho serão correspondidos pela regra.
51+
5. **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que coincide com `.a` contém um componente filho recursivo, então todos os `.b` nesse componente filho serão correspondidos pela regra.

docs/zh-cn/features/scoped-css.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818

1919
``` html
2020
<style>
21-
.example[_v-f3f3eg9] {
21+
.example[data-v-f3f3eg9] {
2222
color: red;
2323
}
2424
</style>
2525

2626
<template>
27-
<div class="example" _v-f3f3eg9>hi</div>
27+
<div class="example" data-v-f3f3eg9>hi</div>
2828
</template>
2929
```
3030

0 commit comments

Comments
 (0)