티스토리 뷰

Vue.js

[VUE] SCSS 폴더 구조 및 전역 설정

피치크러스트 2024. 4. 8. 14:57

# SCSS 폴더 구조
@/assets/scss
                     ㄴabstracts
                         ㄴ_mixins.scss
                         ㄴ_variables.scss
                     ㄴbase
                         ㄴ_reset.scss
                         ㄴ_typography.scss
                     ㄴcomponents
                         ㄴ_buttons.scss
                         ㄴ_dropdown.scss
                     ㄴlayout
                         ㄴ_footer.scss
                         ㄴ_forms.scss
                         ㄴ_header.scss
                         ㄴ_navigation.scss
                     ㄴpages
                         ㄴ_contact.scss
                         ㄴ_home.scss
                      ㄴ_index.scss

// _index.scss
// 위에 모든 SCSS를 한 곳으로 모으는 css

@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/reset";
@import "base/typography";

@import "components/buttons";
@import "components/dropdown";

@import "layout/footer";
@import "layout/forms";
@import "layout/navigation";
@import "layout/header";

@import "pages/contact";
@import "pages/home";
// vue 3 기준
// vue.config.js

const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
	...
	css: {
		loaderOptions: {
			sass: {
				additionalData: `
					@import "@/assets/scss/_index.scss"
				`
			}
		}
	}
})


댓글
공지사항
최근에 올라온 글