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

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...