7

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

これで、scss ファイルで通常参照される画像に対しては問題なく動作します。

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

ただし、ディレクティブを使用すると機能しません。:local

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

rootそして、それは が CSS ローダー用に定義されているためだと思います。ビルド エラーが発生します。Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

代わりに css-loader 構成から削除するrootと、問題なくビルドされますが、パスは Chrome のインスペクターで正しく「見えます」が、実際に新しいタブでリンクを開くと、次のようになります:chrome-devtools://devtools/bundled/"/images/bg.png"明らかに正しく解決されません.

url-loader問題が構成にあるのか、それとも正確に何が起こっているのかはわかりません。

resolve.root、resolve.modulesDirectoriesなどを指定するためにさまざまなwebpack構成をいじってみましたが、それらが影響を与えているのか、それとも完全に間違っているのかはまったくわかりません。私も出くわしましresolve-url-loaderたが、それが私が必要としているものであるかどうかはわかりません。

何か案は？MTIA！

アップデート

Safariでは正常に機能しますが、Chromeでは機能しないことに注意してください。Chrome 固有のバグのように思えますが、すべての開発を Safari で行うのは現実的ではありません。

また、この問題を修正すると主張する style-loader のフォークであるvue-style-loaderにも出会いましたが、それを修正する方法は、ハックな非推奨のエスケープ/ウンエスケープ メソッドに依存することです。

4

2 に答える 2

5

私が思いつく可能性のある解決策の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-loaderURL 構造によっては、 name パラメータを微調整する必要がある場合もあります。

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

したがって、この問題を解決するためのよりクリーンな方法があるかどうかはわかりませんが、これが今のところ思いつく最善の方法です。フィードバックや代替案を歓迎します。

ありがとう！

2016 年 6 月 30 日更新

この問題に対処する PR がいくつかありますが、メンテナーは、CSS ローダーではなく CSS AST にソリューションを配置することを好みます...

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

本当の修正がすぐに行われることを願っています...

于 2016-03-04T21:46:44.210 に答える