0

PostCSS 문제인지 Webpack 문제인지 확실하지 않습니다. 내 입력과 출력PostCSS/Webpack 스타일 시트에 이미지로드 안 함

context: path.resolve(__dirname, '../'), 
entry: ['./core/app.js'], 
output: { 
path: path.resolve(__dirname, '../build'), 
publicPath: '/', 
file: 'build/[name].js', 
sourcePrefix: ' ', 
}, 

은 여기입니다 여기

postcss(bundler) { 
    return [ 
    // Transfer @import rule by inlining content, e.g. @import 'normalize.css' 
    // https://github.com/postcss/postcss-import 
    require('postcss-import')({ addDependencyTo: bundler }), 
    // Lets you use variables inside of @rules 
    // https://github.com/GitScrum/postcss-at-rules-variables 
    require('postcss-at-rules-variables')(), 
    // Mixins 
    // https://github.com/postcss/postcss-mixins 
    require('postcss-mixins')(), 
    // W3C variables, e.g. :root { --color: red; } div { background: var(--color); } 
    // https://github.com/postcss/postcss-custom-properties 
    require('postcss-custom-properties')({variables: combinedStyles}), 
    // Lost grid 
    // https://github.com/peterramsing/lost 
    require('lost')(), 
    //assets 
    // https://github.com/assetsjs/postcss-assets 
    // require('postcss-assets')({ loadPaths: ['**']}), 
    // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em); 
    // https://github.com/postcss/postcss-custom-media 
    require('postcss-custom-media')(), 
    // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { } 
    // https://github.com/postcss/postcss-media-minmax 
    require('postcss-media-minmax')(), 
    // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6; 
    // https://github.com/postcss/postcss-custom-selectors 
    require('postcss-custom-selectors')(), 
    // W3C calc() function, e.g. div { height: calc(100px - 2em); } 
    // https://github.com/postcss/postcss-calc 
    require('postcss-calc')(), 
    // Allows you to nest one style rule inside another 
    // https://github.com/jonathantneal/postcss-nesting 
    require('postcss-nesting')({bubble: ['for']}), 
    // Post css For 
    // https://github.com/antyakushev/postcss-for 
    require('postcss-for')(), 
    // W3C color() function, e.g. div { background: color(red alpha(90%)); } 
    // https://github.com/postcss/postcss-color-function 
    require('postcss-color-function')(), 
    // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); } 
    // https://github.com/iamvdo/pleeease-filters 
    require('pleeease-filters')(), 
    // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; } 
    // https://github.com/robwierzbowski/node-pixrem 
    require('pixrem')(), 
    // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { } 
    // https://github.com/postcss/postcss-selector-matches 
    require('postcss-selector-matches')(), 
    // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors 
    // https://github.com/postcss/postcss-selector-not 
    require('postcss-selector-not')(), 
    // Add vendor prefixes to CSS rules using values from caniuse.com 
    // https://github.com/postcss/autoprefixer 
    require('autoprefixer')(), 
    ]; 
} 

그리고 :

{ 
    test: /\.(png|jpg|jpeg|gif|woff|woff2)$/, 
    loader: 'url-loader?limit=10000', 
}, 
{ 
    test: /\.(eot|ttf|wav|mp3)$/, 
    loader: 'file-loader', 
}, 

여기 postcss 모듈 내 큰 체인입니다 :

여기 내 관련 이미지 핸들러 내 웹팩 설정에있어 내 전화 참조 (CSS)

section { 
background: var(--lightBlue); 
padding: var(--base); 
background-image: url('footer-mountains.png'); 
background-size:cover; 
} 

내 css (footer-mountains.png)에서 이미지를 참조하고 webpack dev 옵션 (일명 ram에서로드 됨)을 통해 적절한 설정 조합을 알아낼 수 없습니다. 적절한 hashfilename 변형이지만 어떻게 든로드 경로 등을 놓치고 있습니다. 나는 주제에 대해 오히려 혼란 스럽다. 통찰력을 고맙게 여기십시오.

여기에 도움이된다면 내가 사용하고있는 전체 패키지입니다 : https://github.com/koistya/react-static-boilerplate

답변

1

내가 절대 경로가 sourcemaps가있을 때 이미지를 표시하는 데 필요한 것을 발견했다. 예 :

publicPath : 'http://localhost:5000/', // 소스 맵을 사용하여 작업 할 CSS의 이미지에 대한 절대 경로입니다. accross lan에 액세스하려면 실제 숫자 ip이어야합니다 (예 : 테스트 장치).

+0

동일한 문제가 발생했습니다. 이미지 또는 무언가를로드하려고 시도 할 때 CORS 오류를 삼키는 브라우저 여야합니다. 이상한. – pospi