You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ko/using_pre-processors.md
+15-15Lines changed: 15 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,22 @@
1
-
# Using Pre-Processors
1
+
# 전처리기 사용하기
2
2
3
3
[`webpack`](https://github.com/webpack/webpack)과 함께 [`vue-loader`](https://github.com/vuejs/vue-loader)를 사용하면 큰 노력을 들이지 않고도 Vue components 파일에서 직접 HTML/CSS/JS를 전-처리 할 수 있다는 이점이 있습니다. 이에 대한 자세한 내용은 [**여기**](https://vuejs.org/v2/guide/single-file-components.html)를 참조하세요.
4
4
5
5
## Use Case
6
6
7
7
CSS를 사전 처리하기 위해 Sass/SCSS를 사용해야한다고 가정 해봅시다. 먼저 다음 구문을 처리 할 적절한 `webpack` loader를 설치해야합니다.
8
8
9
-
#### Installing `sass-loader`
9
+
#### `sass-loader` 설치하기
10
10
11
11
```bash
12
12
npm install --save-dev sass-loader node-sass
13
13
```
14
14
15
-
Once the loader we need is installed, everything is pretty much finished. `vue-loader` will magically take care of the rest. Now we can easily add `lang="sass"`or`lang="scss"` to our Vue component files. Notice we also installed `node-sass` as it is a dependent package for `sass-loader`.
15
+
필요한 로더가 설치되면, 거의 모든 것이 끝난 것 입니다. `vue-loader`는 마술처럼 나머지를 처리합니다. 이제 Vue component 파일에 `lang="sass"`또는`lang="scss"`를 쉽게 추가 할 수 있습니다 `sass-loader`의 의존성 패키지인 `node-sass`도 설치했음을 주의하세요.
16
16
17
-
#### Applying the `lang`attribute
17
+
#### `lang`속성 적용하기
18
18
19
-
So...
19
+
그래서...
20
20
21
21
```html
22
22
<style>
@@ -26,7 +26,7 @@ So...
26
26
</style>
27
27
```
28
28
29
-
...now becomes...
29
+
...이제 된다...
30
30
31
31
```html
32
32
<stylelang="scss">
@@ -36,19 +36,19 @@ So...
36
36
</style>
37
37
```
38
38
39
-
The same principles apply for just about any other pre-processor. So maybe you need coffeescript for your JS? Simply install the [coffeescript-loader](https://github.com/webpack/coffee-loader) and apply the `lang="coffeescript"`attribute to your `<script>`tag.
39
+
다른 전처리기에 대해서도 같은 원칙이 적용됩니다. 그러므로 JS에 coffeescript가 필요하다면, [coffeescript-loader](https://github.com/webpack/coffee-loader)를 설치하고 `lang="coffeescript"`속성을 `<script>`태그에 적용하기만 하면됩니다.
40
40
41
-
For more advanced use of this feature please head over to the [vue-loader documentation](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)for more information.
41
+
이 기능의 고급 사용법은 [vue-loader documentation](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)설명서로를 참고하세요.
42
42
43
-
## Using Sass/SCSS globals
43
+
## Sass/SCSS 전역 변수 사용하기
44
44
45
-
When using Sass/SCSS for your CSS syntax, it's very beneficial to make use of global variables/mixins throughout all Vue component files. Here's how to make that happen.
45
+
CSS 구문에 Sass/SCSS를 사용하는 경우, 모든 Vue component 파일에서 global variables/mixins를 사용할 수 있다면 매우 유용할 것 입니다. 여기에 그 방법이 있습니다.
46
46
47
47
### Use Case
48
48
49
-
This example demonstrates how to apply a `globals.scss` to all Vue component files. This documentation assumes you have already setup `sass-loader` in your development environment as mentioned above.
49
+
이 예는 모든 Vue component 파일에 `globals.scss`를 적용하는 방법을 보여줍니다. 이 문서는 위에서 언급 한 바와 같이 이미 개발 환경에 `sass-loader`를 설치했다고 가정합니다.
50
50
51
-
#### Define your globals
51
+
#### 전역 변수를 정의하세요.
52
52
53
53
**src/renderer/globals.scss**
54
54
@@ -57,9 +57,9 @@ $brand-primary: blue;
57
57
$brand-accent: turquoise;
58
58
```
59
59
60
-
#### Inject `globals.scss` directly into `node-sass`
60
+
#### `globals.scss`를 `node-sass`에 직접 넣으세요.
61
61
62
-
Edit the `vue-loader` config in **.electron-vue/webpack.renderer.config.js**
0 commit comments