web-dev-qa-db-ja.com

Webpackのsassスタイルシートで使用されている画像をロードするにはどうすればよいですか？

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

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

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

$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つの方法は、イメージを明示的に要求してから、reactコンポーネントのインラインスタイルを作成することです。

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: './'
  }
};

ささいなポイントが足りないかもしれません。どんな助けでもありがたいです。

javascriptcssreactjswebpackwebpack-style-loader
11
WitVault

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

ここに問題があった

loader: 'url-loader?limit=10000'

ファイルサイズの制限を10kbに設定していましたが、実際には何をしているのかわかりませんでした。読み込んでいる画像のサイズは21kb！これは、他のいくつかのwebpack設定ファイルをコピーしたときに発生します:) JavaScript疲労の兆候！

19
WitVault

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

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

// 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');
5
Brandon

同様の問題がありましたが、「。jpeg」拡張子が付いた画像が使用されていました。拡張子を「.jpg」に変更すると、何らかの理由で役に立ちました。

0
Aliaksei