diff --git a/docs/ru/configurations/pre-processors.md b/docs/ru/configurations/pre-processors.md index 1d3c80f85..921a7b4ea 100644 --- a/docs/ru/configurations/pre-processors.md +++ b/docs/ru/configurations/pre-processors.md @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev Обратитесь к разделу [продвинутой конфигурации загрузчиков](./advanced.md) для получения дополнительной информации о том, как настраивать vue-loader. +#### Загрузка глобального файла настроек + +Часто встречаются просьбы добавить возможность загружать файл настроек в каждом компоненте без необходимости явно импортировать его каждый раз, например для использования SCSS-переменных глобально во всех компонентах. Для этого нужно: + +``` bash +npm install sass-resources-loader --save-dev +``` + +Затем добавить новое правило в 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 Весь JavaScript внутри Vue компонентов обрабатывается `babel-loader` по умолчанию. При необходимости это можно изменить: diff --git a/docs/ru/features/scoped-css.md b/docs/ru/features/scoped-css.md index 1ca2c27aa..4375a5607 100644 --- a/docs/ru/features/scoped-css.md +++ b/docs/ru/features/scoped-css.md @@ -49,3 +49,19 @@ 4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. 5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. + +6. Если вам нужны вложенные селекторы в `scoped` стилях, вам нужно будет использовать оператор `>>>` для CSS и `/deep/` для `scss`: + + ``` html + + + + ``` \ No newline at end of file diff --git a/docs/ru/workflow/testing-with-mocks.md b/docs/ru/workflow/testing-with-mocks.md index 5326d0543..1b7b7a6ff 100644 --- a/docs/ru/workflow/testing-with-mocks.md +++ b/docs/ru/workflow/testing-with-mocks.md @@ -38,13 +38,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 загрузчику](https://webpack.github.io/docs/loaders.html). Краткое пояснение: - `!!` в начале строки означает "отключи все загрузчики из глобальной конфигурации" -- `vue?inject!` значит "используй `vue` загрузчик и передай запрос `?inject`". Это заставляет `vue-loader` скомпилировать компонент в режиме внедрения зависимостей. +- `vue-loader?inject!` значит "используй загрузчик `vue-loader` и передай запрос `?inject`". Это заставляет `vue-loader` скомпилировать компонент в режиме внедрения зависимостей. Полученный `ExampleInjector` – это фабричная функция, которую можно вызвать, чтобы создать экземпляр модуля `example.vue`: diff --git a/docs/ru/workflow/testing.md b/docs/ru/workflow/testing.md index 389eac419..e8bdf2090 100644 --- a/docs/ru/workflow/testing.md +++ b/docs/ru/workflow/testing.md @@ -11,7 +11,7 @@ Karma – это тестовый движок, который запускае npm install\ karma karma-webpack\ karma-jasmine jasmine-core\ - karma-phantomjs-launcher phantomjs\ + karma-phantomjs-launcher phantomjs-prebuilt\ --save-dev ```