npm 패키지에서 스타일을 내보내고 가져 오는 방법은 무엇입니까?

Question

반응이있는 구성 요소가 있고 webpack을 사용하여 NPM 레지스트리에 구성 요소를 게시합니다. 내 주요 프로젝트에서 그와 같은 구성 요소 NPM 패키지 JS 소비 :

Import myComp from 'myComp'; 

문제는으로 mycomp도 내가 하나에 모든 CSS를 구축하는 (웹팩 및 ExtractTextPlugin의 도움으로 dist/index.css로 만드는 것이, CSS를 가지고있다 파일).

와 나는 같은 스타일을 소비 할 :

Import 'myComp/index.css'; 

또는

Import 'myComp/index'; 

그리고이 수입 방법을 지원하는 방식으로 노출 할으로 mycomp의 NPM 패키지

.

참고 : 내가 node_modules

Import '../../../node_modules/myComp/index.css'; // bad 

감사에서 직접 가져 오지 않는다!

Answer 1

그래서 내가 생각했던 것보다 쉽게, 당신이해야 할 모든 (I 질문에 그랬던 것처럼) 그와 같은 CSS를 가져 오는 것입니다 :

import 'myComp/dist/style.css'; 

그리고 확인 툴 (browserify/웹팩 등 .) 귀하의 자바 스크립트 파일에 loding CSS를 처리 할 수 ​​있습니다.

그래서이 문제는 건물 프로세스와 관련이 있습니다.

---

또한 특정 코드를 npm 레지스트리에 넣으려면 package.json에서 "files"를 사용할 수 있습니다. 이 방법을 사용하면 npm 레지스트리에 필요한 파일 만 남게됩니다. 웹팩

에 대한하지만 난 그들처럼하지 않았다 - browserify https://www.npmjs.com/package/parcelify-loader을 위해 - https://github.com/rotundasoftware/parcelify :

files: [ 
"dist/*.css" 
] 

당신은 또한 같은 도구를 사용할 수 있습니다. 그것은 npm 패키지의 소비자에 대한 의존성을 강요합니다.