sass-loader

(★ 3,892)

Sass를 CSS로 컴파일합니다.

오너의 다른 레포

webpack ★ 65,971

JavaScript 및 관련 생태계를 위한 번들러입니다. 여러 개의 모듈을 소수의 번들된 에셋으로 묶어줍니다. 코드 분할(Code Splitting)을 통해 애플리케이션의 특정 부분을 필요할 때 로드할 수 있습니다. "로더(loaders)"를 통해 CommonJS, AMD, ES6 모듈뿐만 아니라 CSS, 이미지, JSON, Coffeescript, LESS 및 사용자 정의 항목까지 다양한 모듈을 처리할 수 있습니다.

JavaScript
webpack-bundle-analyzer ★ 12,660

번들 콘텐츠를 편리하고 상호작용 가능한 줌 기능이 있는 트리맵으로 시각화해 주는 Webpack 플러그인 및 CLI 유틸리티

JavaScript
webpack-dev-server ★ 7,848

webpack 앱을 실행합니다. 변경 사항이 생기면 브라우저를 업데이트합니다. 문서: https://webpack.js.org/configuration/dev-server/

JavaScript
mini-css-extract-plugin ★ 4,663

경량 CSS 추출 플러그인

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
tapable ★ 3,862

플러그인을 위한 아주 간단한 모듈입니다.

JavaScript

파일 탐색기

ZIP 다운로드
  • .cspell.json
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .prettierignore
  • babel.config.js
  • CHANGELOG.md
  • eslint.config.js
  • LICENSE
  • lint-staged.config.js
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.json

# 설치 가이드

node
사전 준비물

설치 및 실행 절차

npm install sass-loader sass webpack --save-dev

sass-loader 및 필수 의존성 패키지를 설치합니다.

webpack

핵심 명령어

npm install sass-loader sass webpack --save-dev

개발 환경에 sass-loader와 Sass 컴파일러, 웹팩을 설치합니다.

npm test

프로젝트의 테스트 코드를 실행합니다.

sass-loader는 Sass 구현체로 Dart Sass 또는 Sass Embedded 중 하나를 별도로 요구합니다.

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

링크
예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

eval

설명 보기 ▼

현재 쉘에서 인수를 단일 명령으로 실행하고 그 결과를 반환.
더 많은 정보: <https://www.gnu.org/software/bash/manual/bash.html#index-eval>.

eval "{{echo foo}}"

"foo" 인수를 사용하여 `echo`를 호출:

eval "{{foo=bar}}"

현재 쉘에서 변수를 설정:

🔍

npm install

설명 보기 ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

npm

설명 보기 ▼

JavaScript 및 Node.js 패키지 관리자.
Node.js 프로젝트 및 모듈 의존성을 관리합니다.
더 많은 정보: <https://docs.npmjs.com/cli/npm/>.

npm init {{[-y|--yes]}}

기본값으로 `package.json` 파일 생성 (`--yes`를 생략하면 대화식으로 진행):

npm {{[i|install]}}

package.json에 의존성으로 나열된 모든 패키지를 다운로드:

npm {{[i|install]}} {{package_name}}@{{version}}

특정 버전의 패키지를 다운로드하고 `package.json`의 의존성 목록에 추가:

🔍

pnpm

설명 보기 ▼

빠르고, 디스크 공간 효율적인 Node.js용 패키지 관리자.
Node.js 프로젝트 및 해당 모듈 의존성 관리.
더 많은 정보: <https://pnpm.io/pnpm-cli>.

pnpm init

`package.json` 파일 생성:

pnpm {{[i|install]}}

`package.json`에 의존성으로 나열된 모든 패키지를 다운로드:

pnpm add {{module_name}}@{{version}}

특정 버전의 패키지를 다운로드하여 `package.json`의 의존성 목록에 추가:

🔍

sass

설명 보기 ▼

SCSS 또는 Sass 파일을 CSS로 변환.
더 많은 정보: <https://sass-lang.com/documentation/cli/dart-sass/>.

sass {{inputfile.scss|inputfile.sass}}

SCSS 또는 Sass 파일을 CSS로 변환하고 결과를 출력:

sass {{inputfile.scss|inputfile.sass}} {{outputfile.css}}

SCSS 또는 Sass 파일을 CSS로 변환하고 결과를 파일에 저장:

sass --watch {{inputfile.scss|inputfile.sass}}

SCSS 또는 Sass 파일의 변경사항을 감시하고 동일한 파일명으로 CSS 파일 출력 또는 업데이트:

🔍

webpack

설명 보기 ▼

웹 프로젝트의 자바스크립트 파일과 기타 리소스를 단일 출력 파일로 묶어줍니다.
더 많은 정보: <https://webpack.js.org/api/cli/>.

webpack {{app.js}} {{bundle.js}}

진입점이 되는 파일에서 단일 출력 파일 생성:

webpack {{app.js}} {{bundle.js}} --module-bind '{{css=css}}'

자바스크립트 파일에서도 CSS 파일을 로드 (이 경우 CSS 파일에 CSS 로더를 사용합니다):

webpack {{[-c|--config]}} {{webpack.config.js}} --progress

구성 파일(예, 입력 스크립트 및 출력 파일 이름 포함)을 전달하고 컴파일 진행률을 표시:

🔍

yarn

설명 보기 ▼

JavaScript 및 Node.js 패키지 대체 관리자.
더 많은 정보: <https://yarnpkg.com/cli>.

yarn global add {{module_name}}

전역적으로 모듈 설치:

yarn install

`package.json` 파일에 참조된 모든 의존성을 설치 ( `install`은 선택 사항입니다):

yarn add {{module_name}}@{{version}}

모듈을 설치하고 `package.json` 파일에 대한 의존성으로 저장 (개발 전용 의존성으로 추가하려면 `--dev` 추가):

// repository documentation