のWebPACK

Question

とCSSで私は次のWebPACKの設定（大体、それはこの記事のために簡素化されました）があります。

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}`) 
    }, // ... 
] 

今これはイメージのため完全に正常に動作します

0：SCSSファイルで正常に参照： :localディレクティブを使用している場合

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

しかし、それはない作業を行います

そして、私はそれがrootがCSSローダーのために定義されているからだと思います。 Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

代わりにrootをcss-loaderの設定から削除すると、Chromeのインスペクタで正しいパスが作成されますが、実際には新しいタブでリンクを開くと正しく表示されますそれは明らかに正しく解決されないchrome-devtools://devtools/bundled/"/images/bg.png"を指しています。

問題がurl-loaderの設定であるか、正確には何が起こっているのかわかりません。

私はresolve.root、resolve.modulesDirectoriesなどを指定するために別のwebpack設定で遊んでいましたが、それらが何らかの影響を及ぼしているのか、まったく間違っているのか全くわかりません。私もresolve-url-loaderに出くわしましたが、それが私が必要とするものであれば確信が持てません。

アイデア？ MTIA！

UPDATE

私はそれはSafariではなく、Chromeで正常に動作することを、注意してください。だから、Chrome固有のバグのようだが、Safariで私たちのすべての開発を行うことは現実的ではない。

また、この問題を修正すると主張しているスタイルローダーのフォークであるvue-style-loaderも出てきましたが、修正方法は、非推奨のエスケープ/エスケープ解除メソッドに依存しています。

Answer 1

次られた私が思い付くことができ一つの可能​​な解決策：

使用resolve-url-loader（直後sass-loader）：

：

その後

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

、静止画像のためのresolve.aliasを定義します

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

そしてCSSで、次のような画像を指すことができます：

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

あなたのURLの構造に応じて、またurl-loader名前のparamを微調整する必要がある場合があります

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

ので

---

この問題を解決するためにクリーンな方法があるかどうかはわからないが、それはです私はこれまで最高のものを思いついた。フィードバックや代替案を歓迎します。

ありがとうございます！

UPDATE 2016年6月30日があり、この問題に対処するだろうカップルPRのうちだが、メンテナがCSSのASTではなく、CSSローダーにするソリューションを好む

...

WebPACKの2で

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

ここ

本当の修正はすぐに起こることを望んだ...

Answer 2

：

.scssファイルでは、パスの前に〜を使用します。 WebPACKのから解決ルートの

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

メイクの使用、あなたのwebpack.config.jsにこれを追加します。それは@import、例えば@import「〜otherfile.scssのためにも動作するはず

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

"