vue에서 sass 파일로 사용하기

 

> npm init

pacage.json 파일 생성

 

> npm i -g vue

> npm i -g @vue/cli

npm을 통해 vue와 vue cli 를 global로(-g) 설치(i)

 

> vue create 프로젝트_생성할_폴더명

 

 

> npm i -D node-sass sass-loader

node-sass와 sass-loader를 devDependencies로(-D) 설치(i)

 

 

컴포넌트에서 인터널로 sass사용 가능

<style lang="scss">...</style>

 

 

sass폴더, 파일로 사용하기

src 하위에 sass폴더 생성, style.scss 파일 생성

 

vue config에서 sass파일 경로 알려주기

vue.config.js

  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/sass/style.scss";
        `
      }
    }
  },