웹팩 파일 로더와 이미지 내 스타일 시트에서 나는 이미지를 사용하고 CSS

(이하) 미세에 의해이 일을 :웹팩 파일 로더와 이미지 내 스타일 시트에서 나는 이미지를 사용하고 CSS

.foo { background: url('../images/foo.png') }

그들은 내가 약 괜찮아 스타일 시트에 base64로 인코딩있어 HMR을 사용하여 . 그러나 프로덕션을 위해 컴파일 할 때 스타일 시트에 이미지를 포함하지 않기를 바란다. 나는 url-loader과 file-loader을 시도했다.

URL 로더를 사용하면 이미지를 올바르게 출력하지 못했습니다. 제한을 설정하지 않으면 파일이 output/images/으로 내보내지고 올바른 크기를 가졌지 만 유효한 이미지가 아닙니다. 한계를 8k보다 작은 값으로 설정하면 이미지는 output으로 방출되고 올바르게 수정됩니다.

url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);

을 어느 당신이이 해독 할 때 : (limit=1에 URL 로더를 사용하는 경우 예)

는 각각의 경우에 방출 된 이미지 때문에 같은 CSS 등장

module.exports = __webpack_public_path__ + "a07ceed0dbe3e2998695d7f38361d65f.png";

값을 Base64로 인코딩하지 않고 URL을 사용하도록 CSS를 가져 오려면 어떻게해야합니까?

이

내 웹팩입니다 (아직 웹팩 1) 로우더 설정 :

{ 
    test: /\.jsx?$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/, 
}, 
{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css!postcss'), 
}, 
{ 
    test: /\.less$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css!less!postcss'), 
}, 
{ 
    test: /\.(png|jpg|gif)$/, 
    loader: 'file-loader?name=/images/[name].[ext]' 
}

업데이트 :는 less-loader를 해제하는 것은 (URL을 로더를 사용하는 경우 인코딩되는 URL을 중지하지만 이미지가 밝혀 여전히 유효하지는 않지만 파일 로더를 사용할 때는 그렇지 않습니다.

업데이트 2 : 추가 css!less!postcss 로더의 끝에 사용자 정의 로더와 소스는 여전히 ../images/foo.png의 이미지 URL이 때문에이 문제가 선 아래로 더있다가 나타납니다있다. 또한 ExtractTextPlugin을 제거하려고 시도했지만 이미지 용으로 컴파일 된 JS에 CSS와 같은 내보내기 용 Base64 인코딩 값이 있습니다. 내가 처음 분리 한 CSS 파일을 사용하지 않는

출처

2017-02-16 DEfusion

2 ExtractTextPlugins 필요합니다 (css & less 시험하는 것은 문제를 야기했다) 보인다 예상대로 지금 일하고있어.

출처

2017-02-16 04:33:46 DEfusion

웹팩 파일 로더와 이미지 내 스타일 시트에서 나는 이미지를 사용하고 CSS

답변

관련 문제