In webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use based on the `lang` attribute of a language block and the rules in your webpack config.
## SASS
## Sass
For example, to compile our `<style>` tag with SASS/SCSS:
For example, to compile our `<style>` tag with Sass/SCSS:
``` bash
npm install-D sass-loader node-sass
...
...
@@ -48,7 +48,7 @@ Now in addition to being able to `import 'style.scss'`, we can use SCSS in Vue c
Any content inside the block will be processed by webpack as if it's inside a `*.scss` file.
### SASS vs SCSS
### Sass vs SCSS
Note that `sass-loader` processes the non-indent-based `scss` syntax by default. In order to use the indent-based `sass` syntax, you need to pass options to the loader:
В webpack все пре-процессоры должны обрабатываться соответствующими загрузчиками. `vue-loader` позволяет вам использовать другие загрузчики webpack для обработки секций в однофайловых компонентах Vue. Они будут автоматически вызваны на основе указанного атрибута `lang` у секции файла.
## SASS
## Sass
Например, для компиляции нашего тега `<style>` с помощью SASS/SCSS:
Например, для компиляции нашего тега `<style>` с помощью Sass/SCSS:
``` bash
npm install-D sass-loader node-sass
...
...
@@ -48,7 +48,7 @@ module.exports = {
Любое содержимое внутри блока будет обработано webpack, как если бы оно находилось внутри файла `*.scss`.
### SASS vs SCSS
### Sass vs SCSS
Обратите внимание, что `sass-loader` обрабатывает синтаксис `scss` по умолчанию. Если вам требуется синтаксис `sass` с отступами, то необходимо передать опцию в загрузчик:
Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично.
Некоторые пре-процессоры, такие как Sass, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично.
`vue-loader` парсит файл, извлекает каждую из секций, обрабатывает их при необходимости другими загрузчиками webpack, и в итоге собирает всё обратно в ES-модуль где экспорт по умолчанию будет объектом настроек компонента Vue.js.
`vue-loader` предоставляет возможность использовать нестандартные языки, например пре-процессоры CSS и языки шаблонов компилируемые в HTML, указывая атрибут `lang` для секции файла. Например, вы можете использовать SASS для стилей вашего компонента:
`vue-loader` предоставляет возможность использовать нестандартные языки, например пре-процессоры CSS и языки шаблонов компилируемые в HTML, указывая атрибут `lang` для секции файла. Например, вы можете использовать Sass для стилей вашего компонента:
