Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 37 additions & 4 deletions docs/ja/configurations/extract-css.md
Original file line number Diff line number Diff line change
@@ -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")
Expand Down
4 changes: 2 additions & 2 deletions docs/ja/features/scoped-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down
10 changes: 5 additions & 5 deletions docs/pt_BR/features/scoped-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand All @@ -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.
4 changes: 2 additions & 2 deletions docs/zh-cn/features/scoped-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down