Home IT/WEB nuxt.js 에서 sass/scss 사용하는 방법

nuxt.js 에서 sass/scss 사용하는 방법

nuxt.js 에서 scss 파일을 사용하려면 다음과 같은 방법을 통해서 사용할 수 있습니다.

node-sass , sass-loader 를 추가

inline ad

npm,yarn 이용하여 node-sass, sass-loader 를 설치합니다.
저의 경우 sass-loader 설치(11.0.0)후 오류가 나서 버전을 다운그레이드 하여 다시 설치하였습니다.
제가 설치한 버전입니다. “node-sass”: “^5.0.0”, “sass-loader”: “^10.0.1”

using npm:

npm install --save-dev node-sass sass-loader

using yarn:

yarn add --dev node-sass sass-loader

nuxt.config.js 설정

nuxt.config.js 파일에서 css 에 추가할 scss 를 입력하고 해당 경로에 scss 파일을 추가하여 스타일을 적용하면 됩니다.

// nuxt.config.js
css: [
  '~assets/scss/app.scss'
],

@nuxtjs/style-resources 설치 및 셋팅

저의 겅우는 위의 셋팅만 하고 사용하는데 다른 분들은 다음과 같은 셋팅까지 사용해서 하는 분이 많은 거 같아서 설명합니다. 아래 @nuxtjs/style-resources를 설치하고 nuxt.config.js 에서 아래와 같이 설정해주시면 전역변수나 mixin 등을 사용할 수 있습니다.

npm install --save-dev @nuxtjs/style-resources
// nuxt.config.js
export default {
  css: ['~assets/scss/app.scss'],
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    less: '~/assets/scss/*.scss'
  }
}

RECENT POSTS

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...