Vue.js SPA 환경에서 공통 scss 파일 사용하기

Vue.js SPA 환경에서 css 전처리기인 scss를 사용할 때 변수를 하나의 파일에 넣어두고 이를 모든 컴포넌트에서 불러와 사용하는 방법입니다.

결론 먼저

yarn add sass-resources-loader로 패키지를 설치합니다. npm을 사용하신다면 npm으로 설치해주세요.

/build/utils.js 파일을 열어 63번째 줄을 다음과 같이 수정합니다.

scss: generateLoaders('sass'),

위 코드를

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/style/_variables.scss')
    }
  }
),

이렇게 수정합니다. ../src/assets/style/_variables.scss 경로는 프로젝트의 공통 scss 파일 경로에 맞게 적으시면 됩니다.

이제 개발서버를 다시 열어주면 모든 컴포넌트에서 별도의 import 없이 해당 파일의 내용을 참조할 수 있습니다.

자세한 내용은 여기에 나와있습니다. 한국어 문서에는 아직 해당 내용이 반영되지 않았네요.

0
👍
0
❤️
0
😄
0
😝
0
😢
0
😡