WebPack

Question

ile mutlak url() CSS arka plan görüntüleri için yolları çözülemiyor aşağıdaki WebPack yapılandırma (kabaca, bu yazı için basitleştirildi) vardır:

const rootPublic = path.resolve('./public'); 
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]'; 
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`; 
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles'); 

// ... loaders: 

loaders: [ 
    { 
    test: /\.(jpe?g|png|gif|svg)$/, 
    loader: 'url-loader?limit=10000&name=[path][name].[ext]' 
    }, 
    { 
    test: /\.scss$/, 
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}` 
       : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`) 
    }, // ... 
] 

Şimdi bu görüntüler için mükemmel çalışıyor

0: SCSS dosyalarında normalde başvurulan: :local yönergesi kullanırken

.some-static-class { 
    background: url('/images/bg.png'); 
} 

Ancak değil çalışır

Ve bunun nedeni, CSS yükleyicisi için root'un tanımlanmasıdır. Ben bir yapı hatası alıyorum: bunun yerine css-yükleyici yapılandırmasındaki root kaldırırsanız Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

, o zaman gayet oluşturur ama sonra yol Chrome'un denetçisi doğru "bakar", ama aslında yeni bir sekmede açtığınızda , açıkça doğru çözmez: chrome-devtools://devtools/bundled/"/images/bg.png" işaret eder.

Sorun, url-loader yapılandırmasında veya tam olarak ne olup bittiğinden emin değilim.

Farklı bir web paketi yapılandırmasıyla, resol.root, resolve.modulesDirectories, vb. Belirtmek için oyun oynamıştım, ancak herhangi bir etkilenip etkilenmediklerini ya da tamamen yanlış anladığımdan emin değilim. Ayrıca, resolve-url-loader numaralı telefondan da geldim, ancak ihtiyacım olan şeyin bu olduğundan emin değilim.

Herhangi bir fikrin var mı? MTIA!

Ben Safari'de çalışıyor, ancak Chrome'da şunu not edelim

GÜNCELLEME. Bu yüzden Chrome'a ​​özgü bir hata gibi görünüyor, ancak tüm gelişimlerimizi Safari'de yapmak pratik değil.

Ayrıca, bu sorunu çözdüğünü iddia eden bir stil yükleyici çatal olan vue-style-loader ürününe de rastladım, ancak düzeltmenin yolu, bir haksız çıkarılmış kaçış/unescape yöntemine dayanmaktır.

Answer 1

takip ediyordu ben ile gelebilir olası bir çözüm:

Kullanım resolve-url-loader (hemen sonra sass-loader):

:

Sonra

style!${CSS_LOADER}!autoprefixer!resolve-url!${SASS_LOADER} 

, statik görüntüler için bir resolve.alias tanımlamak

resolve: { 
    alias: { 
    images: path.join(__dirname, 'public/images') 
    } 
} 

Ve sonra CSS'de, görüntülere şu şekilde işaret edebilirsiniz:

:local .SomeClass { 
    background: url('images/bg.png'); 
} 

URL yapısına bağlı olarak, aynı zamanda url-loader adı param değişiklikler yapmanızı gerektirecek:

{ 
    test: /\.(jpe?g|png|gif|svg)$/, 
    loader: 'url-loader?limit=10000&name=images/[name].[ext]' 
} 

Yani

---

bu sorunu çözmek için daha temiz bir yol varsa bilmiyorum, ama bu Şimdiye kadar bulabildiğim en iyisi. Geri bildirim veya alternatifleri memnuniyetle karşılarım.

Teşekkürler!

GÜNCELLEME 2016/06/30 Orada bu konuyu ele alacağını bir çift PR'ın dışında ama sürdürücü CSS AST ziyade CSS yükleyici olmak çözümünü tercih

...

WebPack 2 ile

https://github.com/webpack/style-loader/pull/124 https://github.com/webpack/style-loader/pull/96

İşte

gerçek düzeltme yakında gerçekleşmesini umuyor ...

Answer 2

:

.scss dosyalarınızda yolundan ~ önce kullanın. WebPack gelen çözülmesine kökünün

.yourClass { 
     background: url('~img/wallpaper.png'); 
} 

yararlanın, sizin webpack.config.js bu ekleyin: Bu @import, örneğin @import "~ otherfile.scss için de çalışması gerekir

resolve: { 
     modules: [ 
      path.resolve(root), 
      'node_modules' 
     ] 
    }, 

"