webpack.config.js 내의 CSS 파일 정의

webpack을 사용하여 프로젝트를 빌드하고 함께 묶음을 만드는 정적 웹 사이트 생성기와 같은 것을 구축하고 있습니다.webpack.config.js 내의 CSS 파일 정의

이 프로젝트에서 사용자는 사용자 정의 CSS 파일을 지정할 수 있습니다. 나는 그 css 파일을 최종 결과와 함께 묶기를 원한다. 문제는, 내가 개발하는 동안 해당 CSS 파일에 대한 경로가 없어, 그래서 번들로 될 자바 스크립트 코드에서 import 'some-asset-file-provided-by-the-user.css'을 할 수 없다는 것입니다. 하지만 webpack.compile(config)에 전화 할 때 사용할 수 있습니다.

나는 CSS 파일을 번들에 삽입하는 방법을 찾고있다. 웹팩이 "동적"요구를 처리 할 수 없습니다 아마 때문에,

const stylesheet = 'some-asset-file-provided-by-the-user.css' 
require(stylesheet)

가 어느 작동하지 않았다 : 지금까지 나는 다음과 같은 여러 가지 방법을 시도했다. 그런 다음이 웹팩 정의 플러그인을 사용했습니다.

/* webpack.config.js */ 
new webpack.DefinePlugin({ 
    stylesheet: 'some-asset-file-provided-by-the-user.css' 
}), 

/* app.js */ 
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css'

도 작동하지 않았습니다. 또한 이런 일을 할 수있는 방법을 찾기 위해 노력 : 또한 상호 작용 때문에 분명히 어느 스타일 로더 나 CSS 로더 지원이 유형을 실패

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract(Object.assign({ 
    fallback: 'style-loader', 
    use: [ 
     { 
     loader: 'css-loader', 
     options: { 
      useFiles: ['file-a.css', 'file-b.css'] 
     } 
     } 
    ] 
    }, extractTextPluginOptions)) 
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. 
},

어떻게 해결할 수 있습니까? 나는 이것에 대한 플러그인을 쓰는 것에 열중하고 있지만, 나는 기존의 것을 사용하고 싶다.

출처

2017-04-22 machete

CSS를 포함시키는 가장 간단한 방법은 엔트리 포인트에 추가하는 것입니다. 이 작업을 쉽게하기 위해 하나의 파일 일지라도 배열을 진입 점으로 사용해야하므로 간단히 CSS를 푸시 할 수 있습니다. 예를 들어

entry: { 
    app: ['./src/index.js'], 
    // Other entries 
},

하여 컴파일 스크립트에서 당신은 웹팩에 전달하기 전에 entry.app에 추가합니다.

출처

2017-04-22 11:14:53

진입 점에 추가해 주셔서 감사합니다. – machete

webpack.config.js 내의 CSS 파일 정의

답변

관련 문제