[scss] vue scss 설정

vue 버전에 따라 sass-loader 버전의 호환성이 다르기 때문에 버전을 꼭 확인하자. 

- vue 2.6 버전 : sass-loader 10 버전 대 

 

사용

1. 지역 

@는 /src와 같다. 

@import "@/assets/scss/reset.css";

 

2. 전역

루트 디렉토리에 vue.config.js 파일을 추가해준다.

 

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/style.scss";`
      }
    }
  }
};

 

- css.loaderOptions 옵션을 변경해 적용한다.

- 모든 컴포넌트의 스타일에 적용한다.

- sass-loader 버전 8은 data가 아니라 prependData를 써줘야한다.

- 그 이상 버전은 additionalData를 써준다.