From bd0fbce4d0bb3c42012412db20d2e02143c36e4c Mon Sep 17 00:00:00 2001 From: suige Date: Mon, 15 May 2017 00:34:24 -0700 Subject: [PATCH 1/5] Translate css.md via GitLocalize --- ja/css.md | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 ja/css.md diff --git a/ja/css.md b/ja/css.md new file mode 100644 index 00000000..179fefc6 --- /dev/null +++ b/ja/css.md @@ -0,0 +1,110 @@ +# CSS の管理 + +The recommended way to manage CSS is to simply use `` inside `*.vue` single file components, which offers: + +- 関連するコンポーネントのスコープ付き CSS +- プリプロセッサや PostCSS を活用する機能 +- 開発時のホットリロード + +さらに重要なことは、`vue-loader` によって内部的に使われている `vue-style-loader` はサーバーレンダリングのためのいくつかの特別な機能を持っています: + +- クライアントとサーバーのための一般的な変換 +- `bundleRenderer` を使用した時の自動的なCSS評価 + + If used during a server render, a component's CSS can be collected and inlined in the HTML (automatically handled when using `template` option). On the client, when the component is used for the first time, `vue-style-loader` will check if there is already server-inlined CSS for this component - if not, the CSS will be dynamically injected via a `` tag. + +- 共通する CSS の抽出 + +この設定は [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) を使ってメインチャンクのCSSを個別のCSSに抽出することをサポートします ( `template` で自動注入されます ) 。これは、ファイルが個々にキャッシュされることをゆるしています。共通するCSSがたくさんある場合にこの方法をおすすめします。 + +非同期コンポーネントの CSS は JavaScript の文字列としてインライン化されたままになり、`vue-style-loader` によって扱われます。 + +## CSS 抽出の有効化 + +`*.vue` から CSS を抽出するために、`vue-loader` の `extractCSS` オプションを使います ( `vue-loader>=12.0.0` が必要 ) : + +```js +// webpack.config.js +const ExtractTextPlugin = require('extract-text-webpack-plugin') +// CSS extraction should only be enabled for production +// so that we still get hot-reload during development. +const isProduction = process.env.NODE_ENV === 'production' +module.exports = { + // ... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + // enable CSS extraction + extractCSS: isProduction + } + }, + // ... + ] + }, + plugins: isProduction + // make sure to add the plugin! + ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })] + : [] +} +``` + +上記の設定は `*.vue` ファイルのスタイルのみに適用されますが、外部 CSS を Vue コンポーネントにインポートするために `` を使うことができます。 + +もし `import 'foo.css'` のように JavaScriptからCSSをインポートしたいならば、適切な loader の設定が必要です: + +```js +module.exports = { + // ... + module: { + rules: [ + { + test: /\.css$/, + // important: use vue-style-loader instead of style-loader + use: isProduction + ? ExtractTextPlugin.extract({ + use: 'css-loader', + fallback: 'vue-style-loader' + }) + : ['vue-style-loader', 'css-loader'] + } + ] + }, + // ... +} +``` + +## 依存関係からのスタイルのインポート + +NPM 依存で CSS をインポートするときに気を付けることがいくつかあります: + +1. サーバービルドで外部化しないでください。 +2. もし CSS抽出 + `CommonsChunkPlugin` でベンダー抽出を使用している場合、抽出されたベンダーのチャンクに抽出された CSS があれば、`extract-text-webpack-plugin` に問題が発生します。この問題を解決するためには、ベンダーのチャンクに CSS ファイルを含めないでください。クライアント側の webpack の設定例です: + +```js + module.exports = { + // ... + plugins: [ + // it is common to extract deps into a vendor chunk for better caching. + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module) { + // a module is extracted into the vendor chunk when... + return ( + // if it's inside node_modules + /node_modules/.test(module.context) && + // do not externalize if the request is a CSS file + !/\.css$/.test(module.request) + ) + } + }), + // extract webpack runtime & manifest + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest' + }), + // ... + ] + } +``` From 9ab709c4c0e57c99b6708927c58e405f8c7c8bfe Mon Sep 17 00:00:00 2001 From: Ryo Chikazawa Date: Mon, 15 May 2017 00:34:25 -0700 Subject: [PATCH 2/5] Translate css.md via GitLocalize --- ja/css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/css.md b/ja/css.md index 179fefc6..5ea3658a 100644 --- a/ja/css.md +++ b/ja/css.md @@ -1,6 +1,6 @@ # CSS の管理 -The recommended way to manage CSS is to simply use `` inside `*.vue` single file components, which offers: +CSS を管理するためのおすすめの方法は、シンプルに単一ファイルコンポーネントである `*.vue` の中で ``を使うことです。これは以下を提供します: - 関連するコンポーネントのスコープ付き CSS - プリプロセッサや PostCSS を活用する機能 @@ -11,7 +11,7 @@ The recommended way to manage CSS is to simply use `` inside `*.v - クライアントとサーバーのための一般的な変換 - `bundleRenderer` を使用した時の自動的なCSS評価 - If used during a server render, a component's CSS can be collected and inlined in the HTML (automatically handled when using `template` option). On the client, when the component is used for the first time, `vue-style-loader` will check if there is already server-inlined CSS for this component - if not, the CSS will be dynamically injected via a `` tag. +もしサーバレンダリングで使用するなら、コンポーネントの CSS はHTMLに集められてインライン化されます ( `template` オプションを使用していれば自動で扱われます ) 。クライアント上で、コンポーネントが初めて使用されたとき、`vue-style-loader` は既にそのコンポーネントにサーバーインラインCSSがあるかチェックします。もし存在しない場合、そのCSSは動的に `` タグ経由で注入されます。 - 共通する CSS の抽出 From cfcef105cd4c40a003fa6e876566ab523acd94fb Mon Sep 17 00:00:00 2001 From: Ryo Chikazawa Date: Mon, 15 May 2017 00:36:21 -0700 Subject: [PATCH 3/5] Update css.md Remove style closing tags --- ja/css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/css.md b/ja/css.md index 5ea3658a..8bc4f6a6 100644 --- a/ja/css.md +++ b/ja/css.md @@ -1,6 +1,6 @@ # CSS の管理 -CSS を管理するためのおすすめの方法は、シンプルに単一ファイルコンポーネントである `*.vue` の中で ``を使うことです。これは以下を提供します: +CSS を管理するためのおすすめの方法は、シンプルに単一ファイルコンポーネントである `*.vue` の中で `` タグ経由で注入されます。 +もしサーバレンダリングで使用するなら、コンポーネントの CSS はHTMLに集められてインライン化されます ( `template` オプションを使用していれば自動で扱われます ) 。クライアント上で、コンポーネントが初めて使用されたとき、`vue-style-loader` は既にそのコンポーネントにサーバーインラインCSSがあるかチェックします。もし存在しない場合、そのCSSは動的に ``を使うことです。これは以下を提供します: - 関連するコンポーネントのスコープ付き CSS - プリプロセッサや PostCSS を活用する機能 @@ -8,10 +8,10 @@ CSS を管理するためのおすすめの方法は、シンプルに単一フ さらに重要なことは、`vue-loader` によって内部的に使われている `vue-style-loader` はサーバーレンダリングのためのいくつかの特別な機能を持っています: -- クライアントとサーバーのための一般的な変換 +- クライアントとサーバーのためのユニバーサル変換処理の体験 - `bundleRenderer` を使用した時の自動的なCSS評価 -もしサーバレンダリングで使用するなら、コンポーネントの CSS はHTMLに集められてインライン化されます ( `template` オプションを使用していれば自動で扱われます ) 。クライアント上で、コンポーネントが初めて使用されたとき、`vue-style-loader` は既にそのコンポーネントにサーバーインラインCSSがあるかチェックします。もし存在しない場合、そのCSSは動的に `` タグ経由で注入されます。 - 共通する CSS の抽出 From ca2fe87ecfc93abcd8d36085536b78bd1160dfc1 Mon Sep 17 00:00:00 2001 From: Ryo Chikazawa Date: Tue, 16 May 2017 00:05:19 -0700 Subject: [PATCH 5/5] Update css.md --- ja/css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/css.md b/ja/css.md index 6232c498..d51b7eb1 100644 --- a/ja/css.md +++ b/ja/css.md @@ -1,6 +1,6 @@ # CSS の管理 -CSS を管理するためのおすすめの方法は、シンプルに単一ファイルコンポーネントである `*.vue` の中で ``を使うことです。これは以下を提供します: +CSS を管理するためのおすすめの方法は、シンプルに単一ファイルコンポーネントである `*.vue` の中で `` タグ経由で注入されます。 +もしサーバレンダリングで使用するなら、コンポーネントの CSS はHTMLに集められてインライン化されます ( `template` オプションを使用していれば自動で扱われます ) 。クライアント上で、コンポーネントが初めて使用されたとき、`vue-style-loader` は既にそのコンポーネントにサーバーインラインCSSがあるかチェックします。もし存在しない場合、そのCSSは動的に `