diff --git a/docs/ja/configurations/pre-processors.md b/docs/ja/configurations/pre-processors.md index 1b72c8358..5b6c76b25 100644 --- a/docs/ja/configurations/pre-processors.md +++ b/docs/ja/configurations/pre-processors.md @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev vue-loader を構成する方法の詳細については、[高度な loader の設定](./advanced.md)セクションを参照してください。 +#### グローバル設定ファイルの読み込み + +一般的な要求は、毎回明示的にインポートする必要なく、各コンポーネントに設定ファイルを読み込み可能であることです。例としてすべてのコンポーネントで scss 変数をグローバルに使用することです。これを成し遂げるためには: + +``` bash +npm install sass-resources-loader --save-dev +``` + +のように `sass-resources-loader` をインストールし、以下の webpack のルールを追加します: + +``` js +{ + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } +} +``` + +例として、[vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) を使用している場合、 `build/util.js` を以下のように変更してください: + +``` js +scss: generateLoaders('sass').concat( + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } + } +), +``` + +最終的にコンパイルされたファイルに CSS が重複しないように、変数、ミックスインなどのみをこのファイルに含めることをお勧めします。 + ### JavaScript 全ての Vue コンポーネントの JavaScript はデフォルトで `babel-loader` によって処理されます。しかしもちろんそれは変更することが可能です: diff --git a/docs/ja/features/scoped-css.md b/docs/ja/features/scoped-css.md index 207d00a1d..f10f899b9 100644 --- a/docs/ja/features/scoped-css.md +++ b/docs/ja/features/scoped-css.md @@ -49,3 +49,19 @@ 4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります(すなわち属性セレクタと組み合わせた場合)。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。 5. **再帰されたコンポーネントの子孫セレクタには気をつけてください!** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。 + +6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります: + + ``` html + + + + ``` diff --git a/docs/ja/workflow/testing-with-mocks.md b/docs/ja/workflow/testing-with-mocks.md index b14df1881..91de6e1e4 100644 --- a/docs/ja/workflow/testing-with-mocks.md +++ b/docs/ja/workflow/testing-with-mocks.md @@ -36,13 +36,13 @@ npm install inject-loader@^2.0.0 --save-dev ``` js // example.spec.js -const ExampleInjector = require('!!vue?inject!./example.vue') +const ExampleInjector = require('!!vue-loader?inject!./example.vue') ``` 注意。狂気じみた文字列を必要とします - ここではいくつかのインライン [webpack loader](https://webpack.github.io/docs/loaders.html) を使用しています。簡単な説明としては: - `!!`は "グローバル設定からすべてのローダを無効にする"ことを意味します; -- `vue?inject!` は "`vue` loader を使い、`?inject` クエリを渡す"ことを意味します。 これは `vue-loader` に、依存性注入モードでコンポーネントをコンパイルするように指示します。 +- `vue-loader?inject!` は `vue-loader` を使い、`?inject` クエリを渡す"ことを意味します。 これは `vue-loader` に、依存性注入モードでコンポーネントをコンパイルするように指示します。 返される `ExampleInjector` は、`example.vue` モジュールのインスタンスを生成するために呼び出すことができるファクトリ関数です: diff --git a/docs/ja/workflow/testing.md b/docs/ja/workflow/testing.md index ccdc16da4..bcec7624f 100644 --- a/docs/ja/workflow/testing.md +++ b/docs/ja/workflow/testing.md @@ -10,7 +10,7 @@ Karma はブラウザを起動してテストを実行するテストランナ npm install\ karma karma-webpack\ karma-jasmine jasmine-core\ - karma-phantomjs-launcher phantomjs\ + karma-phantomjs-launcher phantomjs--prebuilt\ --save-dev ```