Vue CLI 3 프로젝트의 내 SCSS 설정

베일에 이르러서야 나는 발전에 대한 열정을 잃었다는 것을 깨달았다.제이스 왔다.나는 아직 공부하고 있지만, 그것은 나로 하여금 코드를 작성하는 즐거움을 다시 한 번 체험하게 했다.나는 이미 끊어졌다 이어졌다 하며, 지금 나는 Vue를 사용하여 처음부터 나를 구축하고 있다. own website
가장 이해하기 어려운 일 중 하나는 프로젝트 구조다.이것은 많은 강좌가 포괄할 수 있는 것이 아니다.마지막으로 나는 그것을 모아서 다음 문제에 부딪혔다.SCSS.
나는 사람들이 통상적으로 전역 스타일과 모든 구성 요소의 스타일을 어떻게 사용하는지에 대한 많은 정보를 찾을 수 없다.나는 어떻게 하고 싶은지 생각이 하나 있는데, 어떻게 그것을 진정으로 실현할 수 있는지 모르겠다.만약 당신도 비슷한 상황을 만났다면, 나는 이 문장이 어느 정도 도움이 되기를 바랍니다.
Vue CLI 3 애플리케이션을 처음부터 생성하는 방법은 다음과 같습니다.

응용 프로그램 만들기

Vue CLI 3이 설치된 경우 터미널에서 다음 명령을 실행하여 브라우저에서 Vue Project Manager를 시작합니다.

vue ui

만약 당신이 아직 설치하지 않았다면, 여기는 당신이 필요로 하는 것입니다 documentation.
응용 프로그램을 만들려면 Vue Project Manager에서 화면 맨 위에 있는 만들기 버튼을 클릭합니다.이것은 일반적으로 터미널에서 실행해야 하는 여러 단계를 안내하고 설정을 미리 설정으로 저장할 수 있도록 합니다.한디!
내 프로젝트에 대해 나는 다음과 같은 옵션을 선택하는 경향이 있다.

포장 매니저: 실

사전 설정: 수동(첫 번째 항목)

기능: 바베타, 라우터, CSS 사전 프로세서, Linter/Formatter

히스토리 모드: 열기

사전 프로세서: SCSS/SASS

피면/포맷 프로그램: ESLint+Prettier(보존시 피면)

프로젝트를 만들려면 누르십시오. 프로그램을 만들 것입니다.너는 지금 기본적인 Vue가 있어야 한다.js 프로젝트.Vue 프로젝트 관리자의 작업 탭으로 이동하고 서비스 를 클릭하여 로컬 시작 사이트에서 이 기능을 실행할 수 있습니다.

우리의 풍격을 세우다

우선, src 폴더에 스타일스라는 폴더를 만듭니다.애플리케이션의 모든 SCS를 여기에 저장합니다.이 폴더에서 전역 스타일에 사용할 파일을 만듭니다. 예를 들어 전역 스타일입니다.scss
Vue 프로젝트 관리자에서 플러그 인 탭으로 이동하고 플러그 인 추가 버튼을 클릭합니다.vue cli plugin style resources loader라는 플러그인을 설치하려고 합니다.
설치 후, 프로젝트의 루트 디렉터리에 vue라는 파일을 추가합니다.배치하다.js
가다배치하다.js와 다음 코드를 추가하여 스타일시트 이름/경로를 전역 스타일의 scss 파일로 바꿉니다.

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
    }
  }
};

현재, 전 세계에서 온 모든 스타일.SCS는 전체 프로젝트 및 어셈블리에서 사용할 수 있습니다.일반적으로 내 SCSS 파일 구조는 처음에 다음과 같습니다.

base에 기본 리치 텍스트 스타일이 있습니다.SCS, 변수, 레이아웃 등은partials로 각각의 폴더에 저장됩니다.그런 다음 다음과 같이 글로벌 스타일시트를 가져옵니다.

@import "setup/normalize.scss";
@import "setup/typography.scss";
@import "setup/variables.scss";
@import "setup/mixins.scss";

@import "basics/base.scss";
@import "basics/layout.scss";
@import "basics/links.scss";
@import "basics/buttons.scss";

스타일 디렉터리에 구성 요소에 사용할 폴더가 하나 더 있습니다.Vue에서 생성한 각 구성 요소에는 고유의 SCS 섹션이 있습니다.Vue의 유용한 기능js는 Vue 구성 요소 파일에 스타일을 추가할 수 있으며, 이 스타일의 범위를 제한해서 페이지에 특정한 구성 요소를 나타낼 때만 나타낼 수 있도록 합니다.
현재 우리는 모두 설정되어 있어서 구성 요소에 스타일을 추가하는 것은 매우 쉽다.다음은 나의 구성 요소 예시에서 그것의 외관이다.vue

<template>
  <div>
    <h1>I am a component!</h1>
  </div>
</template>

<script>
export default {
  name: Example
}
</script>

<style lang="scss" scoped>
@import "../styles/components/example.scss";
</style>

예제에서scss 파일은 모든 변수/레이아웃/혼합 및 전역 스타일에 추가된 다른 내용에 접근할 수 있습니다.또한 스타일 레이블에 $c-title은 머리글 색상의 글로벌 변수 이름입니다.

<style lang="scss" scoped>
h1 {
  color: $c-title;
}
</style>

그러나 나는 모든 스타일을 한 곳에 저장하는 것을 좋아한다. (스타일 폴더와 하위 폴더) 파일 이름은 구성 요소 자체의 이름과 같다.이렇게 하면 다른 사람과 함께 일할 수 있는 것을 더욱 쉽게 찾을 수 있다.
이것은 매우 긴 문장입니다. 만약 당신이 이미 이 단계를 완성했다면, 읽어 주셔서 감사합니다.나는 이것이 도움이 될 수 있기를 바란다.당신의 Vue 프로젝트의 즐거움을 즐기고 좋은 것을 창조하세요!