12

Webpackを使用してモジュールをバンドルし、sassを使用して反応ベースのアプリケーションでスタイルを設定しています。

別のスタイルシートを使用して、コンポーネントの背景画像を設定し、そのスタイルシートを にロードしましたindex.js。style-sheet のすべてのスタイルは、background image を除いてそのコンポーネントに適用されます。

これが私のサンプルスタイルシートです

$bg-img: url('/img/bg.jpg');

.show {
    position: relative;
    background: $black $bg-img center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

この問題を解決する 1 つの方法は、画像を明示的に要求してから、反応コンポーネントのインライン スタイルを作成することです。

img1 = document.createElement("img");
img1.src = require("./image.png");

しかし、各画像を個別に要求するのではなく、スタイルシートが読み込まれるとすぐに、画像フォルダーからすべての画像を読み込みたいです。

私のwebpack構成ファイルは

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      },
      { 
        test: /\.(png|jpg)$/,
        include: path.join(__dirname, 'img'),
        loader: 'url-loader?limit=10000' 
     } // inline base64 URLs for <=10k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

私はいくつかの些細な点を見逃しているかもしれません。どんな助けでも大歓迎です。

4

3 に答える 3

22

ああ....長時間のデバッグの後、ようやく問題が見つかりました。私が苦労したのは私の愚かさでした。この質問を削除したかったのですが、私のような初心者が同様の問題に悩まされているときに役立つと思いました.

問題はここにありました

loader: 'url-loader?limit=10000'

私は、それが何をするのかよくわからないまま、ファイルサイズを10kbに制限していました。そして、読み込んでいた画像のサイズは21kb でした! これは、他の webpack 構成ファイルをコピーしたときに発生します:) javascript 疲労の兆候!

于 2016-02-10T22:43:59.413 に答える
5

webpack を使用して CSS とそれらがアクセスするアセットをロードする場合、CSS は、JavaScriptimportまたはrequire呼び出しで使用するのと同じモジュール命名規則に従う必要があります。

フォルダーがソース ツリーのルートにあると仮定すると、imgscss で次のように参照する必要があります。

// note there is no leading /, which tells "require()" to start from the root of your source tree
$bg-img: url('img/bg.jpg');

または、完全に相対的になります。ソースコードが次のようなものであると仮定します。

/src/styles.scss
/img/bg.jpg

相対styles.scssパスを使用できます：

// note the path is relative to where the style.scss is in your source tree.
$bg-img: url('../img/bg.jpg');
于 2016-02-10T21:27:36.493 に答える