update ja docs and other (#812)

kazupon · web-flow · commit 635e96c85367 · 2017-05-16T23:36:27.000+09:00
* update scoped use data attribute * update other langulages * update extract css section NOTE: pick up from 5c9b80c * translate previous commit * fix miss-translation
diff --git a/docs/ja/configurations/extract-css.md b/docs/ja/configurations/extract-css.md
@@ -1,13 +1,46 @@
 # CSS を単一のファイルに抽出する
 
-すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
-
-### Webpack 2.x
-
 ``` bash
 npm install extract-text-webpack-plugin --save-dev
 ```
 
+## 簡単な方法
+
+> vue-loader@^12.0.0 と webpack@^2.0.0 必須
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // 他のオプション...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          extractCSS: true
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```
+
+上記は、`*.vue` ファイル内部の `<style>` のための抽出を自動的に処理し、ほとんどのプリプロセッサでそのまま使えます。
+
+これは、`*.vue` ファイルだけを抽出することに注意してください。JavaScript でインポートされた CSS は、別途設定する必要があります。
+
+## 手動設定
+
+すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
+
+### Webpack 2.x
+
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
diff --git a/docs/ja/features/scoped-css.md b/docs/ja/features/scoped-css.md
@@ -18,13 +18,13 @@
 
 ``` html
 <style>
-.example[_v-f3f3eg9] {
+.example[data-v-f3f3eg9] {
   color: red;
 }
 </style>
 
 <template>
-  <div class="example" _v-f3f3eg9>hi</div>
+  <div class="example" data-v-f3f3eg9>hi</div>
 </template>
 ```
 
diff --git a/docs/pt_BR/features/scoped-css.md b/docs/pt_BR/features/scoped-css.md
@@ -18,13 +18,13 @@ Para o seguinte:
 
 ```html
 <style>
-  .example[_v-f3f3eg9] {
-    color: red;
-  }
+.example[data-v-f3f3eg9] {
+   color: red;
+ }
 </style>
 
 <template>
-  <div class="example" _v-f3f3eg9>hi</div>
+  <div class="example" data-v-f3f3eg9>hi</div>
 </template>
 ```
 
@@ -48,4 +48,4 @@ Para o seguinte:
 
 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.
 
-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.
+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.
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
@@ -18,13 +18,13 @@
 
 ``` html
 <style>
-.example[_v-f3f3eg9] {
+.example[data-v-f3f3eg9] {
   color: red;
 }
 </style>
 
 <template>
-  <div class="example" _v-f3f3eg9>hi</div>
+  <div class="example" data-v-f3f3eg9>hi</div>
 </template>
 ```
 
