CSS 파일을 패키징하는 방법은 무엇입니까? CSS 파일을 패키징하는 방법

이 글의 내용은 CSS 파일을 패키징하는 방법에 관한 것입니다. CSS 파일을 패키징하는 방법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css 파일 패키징

로더는 webpack의 가장 중요한 기능 중 하나입니다. 다양한 로더를 사용하여 다양한 파일 형식을 구체적으로 처리할 수 있습니다. # 🎜🎜#

로더는 모듈 모듈

에 있습니다. 로더 사용 방법에 대한 몇 가지 예를 들어보세요.

• 할 수 있습니다. SASS를 사용하면 다른 변환 도구를 사용하지 않고 파일 쓰기가 CSS로 변환됩니다.

• 에서는 ES6 또는 ES7 코드를 대부분의 브라우저와 호환되는 JS 코드로 변환할 수 있습니다.

• 은 React의 JSX를 JavaScript 코드로 변환할 수 있습니다.

참고: 모든 로더는 npm에 별도로 설치하고 webpack.config.js에서 구성해야 합니다. 로더의 구성 유형을 간략하게 살펴보겠습니다.

test: 처리된 파일의 확장자를 일치시키는 데 사용되는 표현식입니다.

use: 로더 이름은 원하는 모듈의 이름입니다. 을 사용하면 이 옵션도 구성해야 합니다. 그렇지 않으면 오류가 보고됩니다.
include/exclude: 처리해야 하는 파일(폴더)을 수동으로 추가하거나 처리할 필요가 없는 파일(폴더)을 차단합니다(선택 사항). );
query : 로더에 대한 추가 설정 옵션 제공(선택 사항)

Package CSS file src 디렉터리에 css 폴더를 생성하고,
폴더에 index.css 파일을 생성합니다. Created 는 패키징되기 전에 항목 파일에 도입되어야 합니다. 여기서는 이를 Entry.js에 도입합니다.

/src/entery.js 첫 번째 줄에 코드를 추가합니다:

import css from './css/index.css';#🎜🎜 #

CSS와 소개가 끝나면 로더를 사용하여 CSS 파일, 즉 style-loader와 css-loader를 파싱해야 합니다.

style-loader:

CSS 파일에서 url() 등을 처리하는 데 사용됩니다. npm의 URL: https://www.npmjs.com/package/style-loader npm install을 사용하여 프로젝트 설치: 스타일 로더 및 CSS를 설치할 때 해당 코드에 주의하세요. -로더 다름

npm 설치 스타일 로더 –save-dev

css- loader

:

페이지에 CSS를 삽입하는 데 사용되는 스타일 태그입니다. npm의 URL: https://www.npmjs.com/package/css-loader npm install을 사용하여 프로젝트 설치: npm install –save-dev css -loader

두 로더를 모두 다운로드하고 설치한 후 로더를 구성할 수 있습니다.

loaders 구성:

webpack.config.js

 body{
      background-color: red;     
      color: white; 
      }

모듈에 쓰는 세 가지 방법이 있습니다# 🎜🎜 # 1, 사용: [ 'style-loader', 'css-loader'
2, 로더: ['style-loader', 'css-loader']

3, #🎜 🎜#

module:{ 
    rules: [{ 
         test: /\.css$/, 
         use: [ 'style-loader', 'css-loader' ] 
     }] 
 },

관련 권장사항:
웹사이트에 js 및 css 파일 패키지

때때로 CSS 인용된 이미지를 패키징했는데도 리소스 파일을 찾을 수 없는 이유는 무엇인가요?

위 내용은 CSS 파일을 패키징하는 방법은 무엇입니까? CSS 파일을 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!