postcss import
14.0.0
콘텐츠를 인라인하여
@import규칙을 변환하는 PostCSS 플러그인입니다.
이 플러그인은 로컬 파일, 노드 모듈 또는 web_modules를 사용할 수 있습니다. @import 규칙의 경로를 확인하기 위해 루트 디렉터리(기본적으로 process.cwd() ), web_modules , node_modules 또는 로컬 모듈을 조사할 수 있습니다. 모듈을 가져올 때 style 또는 main 필드에서 index.css 또는 package.json 에서 참조된 파일을 찾습니다. 살펴볼 위치에 여러 경로를 수동으로 제공할 수도 있습니다.
참고:
이 플러그인은 아마도 목록의 첫 번째 플러그인으로 사용되어야 할 것입니다. 이렇게 하면 다른 플러그인이 처리할 파일이 하나뿐인 것처럼 AST에서 작동하며 아마도 예상대로 작동할 것입니다 .
플러그인 체인에서 postcss-import 이후 postcss-url을 실행하면 가져온 파일을 인라인 처리한 후 자산 url() 조정하거나 인라인 처리할 수 있습니다.
출력을 최적화하기 위해 이 플러그인은 지정된 범위(루트, 미디어 쿼리...)에서 한 번만 파일을 가져옵니다 . 테스트는 가져온 파일의 경로 및 내용(해시 테이블 사용)에서 수행됩니다. 이 동작이 원하는 동작이 아닌 경우 skipDuplicates 옵션을 살펴보세요.
Glob Imports를 찾고 있다면 postcss-import-ext-glob을 사용하여 postcss-import를 확장할 수 있습니다.
원격 소스를 가져오려면 postcss-import-url을 dataUrls 플러그인 옵션과 함께 사용하여 postcss-import를 확장할 수 있습니다.
수정되지 않은 가져오기( options.filter 또는 원격 가져오기이기 때문에)는 출력의 맨 위로 이동됩니다.
이 플러그인은 CSS @import 사양을 따르려고 합니다 . @import 문은 다른 모든 문( @charset 제외)보다 앞에 와야 합니다.
$ npm install -D postcss-import
스타일시트가 postcss( process.cwd() )를 실행하는 동일한 위치에 있지 않는 한, 상대 가져오기가 작동하도록 하려면 from 옵션을 사용해야 합니다.
// 종속성const fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// 처리할 CSSconst css = fs.readFileSync("css/input.css" , "utf8")// csspostcss() 처리
.use(atImport())
.process(css, {// 여기서 `from` 옵션이 필요합니다: "css/input.css"
})
.then((결과) => {const 출력 = result.cssconsole.log(출력)
}) css/input.css :
/* 원격 URL은 보존됩니다. */@import "https://example.com/styles.css";/* `node_modules`, `web_modules` 또는 로컬 모듈을 사용할 수 있습니다. */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* 위의 `from` 옵션에 따라 css/에 상대적 *//* "url" 값의 모든 표준 표기법이 지원됩니다. */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (최소 너비: 25em);@import 'baz.css' 레이어(baz-layer);body { 배경: 검정색;
}당신에게 줄 것입니다 :
@import "https://example.com/styles.css";/* ... ../node_modules/cssrecipes-defaults/index.css의 콘텐츠 *//* ... ../node_modules/normalize의 콘텐츠 .css/normalize.css *//* ... css/foo.css 내용 *//* ... css/foo-1.css 내용 *//* ... 내용 css/foo-2.css */@media (최소 너비: 25em) {/* ... css/bar.css의 콘텐츠 */}@layer baz-layer {/* ... css/baz의 콘텐츠 .css */}body { 배경: 검정색;
}더 많은 예제를 보려면 테스트를 확인하세요.
filter 유형: Function
기본값: () => true
테스트 함수가 true 반환하는 변환 가져오기만 가능합니다. 테스트 함수가 false 반환하는 가져오기는 그대로 유지됩니다. 함수는 가져올 경로를 인수로 가져오고 부울을 반환해야 합니다.
root 유형: String
기본값: process.cwd() 또는 postcss from dirname
경로를 확인할 루트를 정의합니다(예: node_modules 있는 위치). 그렇게 많이 사용해서는 안됩니다.
참고: 중첩된 @import 가져온 파일의 상대 디렉토리 이름을 추가로 활용할 수 있습니다.
path 유형: String|Array
기본: []
파일을 찾을 위치의 문자열 또는 경로 배열입니다.
plugins 유형: Array
기본값: undefined
가져온 각 파일에 적용할 플러그인 배열입니다.
resolve 유형: Function
기본값: null
이 옵션을 사용하여 사용자 정의 경로 확인자를 제공할 수 있습니다. 이 함수는 (id, basedir, importOptions, astNode) 인수를 가져오고 경로, 경로 배열 또는 경로를 확인하는 약속을 반환해야 합니다. 절대 경로를 반환하지 않으면 경로는 기본 확인자를 사용하여 절대 경로로 확인됩니다. 이를 위해 해결을 사용할 수 있습니다.
load 유형: Function
기본값: null
이 옵션을 설정하면 기본 로딩 방식을 덮어쓸 수 있습니다. 이 함수는 (filename, importOptions) 인수를 가져오고 콘텐츠 또는 약속된 콘텐츠를 반환합니다.
skipDuplicates 유형: Boolean
기본값: true
기본적으로 유사한 파일(동일한 내용을 기반으로 함)은 건너뜁니다. 예를 들어 출력을 최적화하고 normalize.css 와 같은 유사한 파일을 건너뛰는 것입니다. 이 동작이 원하는 것이 아닐 경우 이 옵션을 false 로 설정하여 비활성화하면 됩니다.
addModulesDirectories 유형: Array
기본: []
Node의 해석기에 추가할 폴더 이름의 배열입니다. 값은 기본 확인 디렉터리인 ["node_modules", "web_modules"] 에 추가됩니다.
이 옵션은 기본 확인자에 추가 디렉터리를 추가하는 데만 사용됩니다. 위의 resolve 구성 옵션을 통해 자체 해결 프로그램을 제공하는 경우 이 값은 무시됩니다.
warnOnEmpty 유형: Boolean
기본값: true
기본적으로 postcss-import 빈 파일을 가져올 때 경고합니다.
이 경고를 비활성화하려면 이 옵션을 false 로 설정하십시오.
const postcss = require("postcss")const atImport = require("postcss-import")postcss()
.use(atImport({경로: ["src/css"],
}))
.process(cssString)
.then((결과) => {const { css } = 결과
})dependency 메시지 지원 postcss-import 각 @import 에 대해 result.messages 에 메시지를 추가합니다. 메시지의 형식은 다음과 같습니다.
{
type: 'dependency',
file: absoluteFilePath,
parent: fileContainingTheImport
}이는 주로 파일 감시를 구현하는 postcss 실행기에서 사용됩니다.
⇄ 끌어오기 요청 및 ★ 별은 언제나 환영합니다.
버그 및 기능 요청이 있는 경우 이슈를 생성해 주세요.
풀 요청에는 자동화된 테스트( $ npm test )를 통과해야 합니다.
