vue.js 앱에서 CSS를 사용하는 방법은 무엇입니까?

CSS로 사이트를 정확하게 작성해야하는 방법을 이해하는 데 문제가 있습니다. 각 구성 요소에는 자체 CSS가 있지만 각 구성 요소마다이 작업을 수행해야합니까? 구성 요소가 많은 CSS를 사용하는 경우 어떻게됩니까?vue.js 앱에서 CSS를 사용하는 방법은 무엇입니까?

vue.js로 만든 일부 사이트를 살펴본 결과 내부 스타일 블록이 많은 app.css 파일과 같은 외부 CSS 파일이 있습니다.

나는 Sass가있는 사이트를 자신의 /styles 디렉토리에 만들고 compass.app를 .scss 개의 파일을 .css 개의 파일로 컴파일하는 데 사용합니다.

는 다음 구성 요소의 CSS 블록의 예 :

<style lang="scss"> 
h1, h2 { 
    font-weight: normal; 
} 
ul { 
    list-style-type: none; 
    padding: 0; 
} 
li { 
    display: inline-block; 
    margin: 0 10px; 
    a { 
    color: red; 
    } 
} 
</style>

그 천 + 줄 수 있다면 어떨까요? 그 파일을 외부 scss 파일로 옮길 수 있습니까? 이 모든게 어떻게 작동합니까?

감사합니다.

출처

2017-12-13 kinx

단일 구성 요소에 대한 스타일이 너무 길면 구성 요소가 재사용 가능한 작은 구성 요소로 분리 될 수 있습니까? – Dean

부트 스트랩과 같은 스타일의 전체 목록이나 각 구성 요소에서 사용하려는 일반 사항이있는 경우 전역으로 만들어 app.vue 또는 응용 프로그램 시작점에 필요합니다. 그렇지 않으면 각 구성 요소마다 고유 한 고유 한 스타일, 그것은 그것의 자신의 구성 요소에 그것을 포함시키는 것이 합리적이다, @Dean이 말한 것은 또한 사실이다 – samayo

알았어. 그렇다면 별도의 CSS 파일 대신 100 개의 스타일 블록을 갖는 웹 사이트가 괜찮습니까? 필자는 좋은 이유와 깨끗한 코드, 그리고 더 작은 html 문서로 생각한 것을 위해 항상 개별 파일에 제 스타일을 사용했기 때문에 이것이 가장 큰 혼란이라고 생각합니다. – kinx

당신 관심사는 당신이 구성 요소에 사용자 정의 CSS 코드가 당신이 작성하는 스타일은 해당 구성 요소에 적용 할 수 있도록 범위가 지정된 속성을 추가 할 수있는 코드 분리에 대한 경우 :

<style lang="scss" scoped> 

    /* your scoped css rules here will only apply to this component */ 

</style>

또한 당신이 경우 지금 모든 구성 요소에서 CSS를 컴파일하고 기본 HTML 파일에서 링크 할 단일 최종 CSS 파일에 병합하려는 경우 webpack과 같은 bundler/컴파일러를 추가해야합니다.

vue css-loader에서 CSS 규칙을 모듈화하고 작성하는 방법을 이해해야합니다.

출처

2017-12-13 17:36:05

vue.js 앱에서 CSS를 사용하는 방법은 무엇입니까?

답변

관련 문제