【Vue.js】Vue-CLI(4.1.1)로 SCSS를 읽는 순서

소개

Vue-CLI를 사용하여 SCSS 파일을 로드하기 위한 기사는 많이 히트 합니다만, 낡은 정보도 많습니다.

그러므로 Vue-CLI 4.1.1에서 잘 수행한 절차를 그대로 둡니다.

이 기사가 도움이 되는 분

Vue-CLI4.1.1에서 SCSS를로드하고 싶은 분

이 기사의 장점

무사한 SCSS가 읽을 수있게된다

환경

OS: macOS Catalina 10.15.1
zsh: 5.7.1
Vue: 2.6.10
vue-cli: 4.1.1

절차

1. 신규 프로젝트 작성

먼저 Vue-CLI에서 새로 생성합니다.

이번 프로젝트명은 test로 합니다.

※ 길어진 것 같습니다만, 일단 모두 실어 둡니다.

$ vue create test

Vue CLI v4.1.1
? Please pick a preset: 
  MyStandard (node-sass, babel, router, vuex, eslint) 
  default (babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in product
ion) (Y/n) y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files 
  In package.json 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files 
  In package.json 

마지막 설정 저장은 기호로 좋다고 생각합니다.

2.SCSS 파일 준비

여기부터는 이 기사대로 실시로 OK였습니다. (살아났습니다!)
Vue CLI 3에서 글로벌 SCSS 로드 - Qiita

SCSS의 구성은, 이번 설명용이므로 꽤 간단하게 해 둡니다.

메인

test/src/assets/sass/main.scss

변수 정의 · mixin 등 직접 스타일 정의하지 않는 것

test/src/assets/sass/prepends.scss

3. main.js에 추가

main.js

require('@/assets/sass/main.scss')

main.scss를 로드합니다.

4. vue.config.js 만들기

touch vue.config.js

test 디렉토리 바로 아래로 이동하여 vue.config.js를 만듭니다.

※ package.json 가 있는 디렉토리입니다.

5. vue.config.js에 추가

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/sass/prepends.scss";'
      }
    }
  }
};

여기 prepends.scss를 로드합니다.

6. yarn serve

yarn serve

vue.config.js에 추가한 후에는 다시 빌드해야 합니다.

이상입니다!
이것으로 무사히 SCSS가 읽을 수 있는 상태가 되어 있을 것입니다

결론

끝까지 읽어 주셔서 감사합니다

누군가가 도움이되면 다행입니다

참고로 한 사이트 (항상 감사합니다)

Vue CLI 3에서 글로벌 SCSS 로드 - Qiita