Dart Sass 설치

1. Node.js 설치

2. Dart Sass 설치

npm install -g sass

3. Sass 컴파일

sass --watch source/index.scss css/index.css

👉 input.scss : 컴파일하려는 Sass 파일의 이름
ex) main.scss

👉 output.css : 생성될 CSS 파일의 이름
ex) main.css

Lint

1. StyleLint

• SCSS와 다른 CSS 전처리기를 위한 코드 스타일 검사 도구입니다.
• SCSS 코드의 일관성을 유지하고 잠재적인 문제를 식별하기 위해 사용할 수 있습니다.
• .stylelintrc.json 파일을 프로젝트 루트 디렉토리에 생성하고 필요한 스타일 가이드 및 규칙을 정의하세요.

npm install stylelint stylelint-scss stylelint-config-standard --save-dev

2. ESLint

• 주로 JavaScript 코드의 Linting에 사용되지만 SCSS 코드의 Linting을 위한 플러그인을 사용할 수 있습니다.
• 플러그인 중 하나는 stylelint와 통합하여 SCSS 파일을 Linting할 수 있습니다.
• JavaScript와 SCSS 코드를 함께 관리하는 프로젝트에 유용할 수 있습니다.

npm install eslint stylelint stylelint-scss eslint-plugin-stylelint --save-dev

• ESLint 및 StyleLint 구성 파일을 생성하고 설정하세요.
• ESLint 설정 파일에서 stylelint 플러그인을 활성화하고 SCSS 파일을 대상으로 설정을 추가하세요.

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended'],
  plugins: ['stylelint'],
  rules: {
    // Add ESLint rules
  },
  overrides: [
    {
      files: ['**/*.scss'],
      processor: 'stylelint-processor',
      rules: {
        // Add SCSS-specific rules
      },
    },
  ],
};