Как загрузить изображения, используемые в таблице стилей sass в webpack?

Я использую Webpack для связывания моих модулей и использования Сасс для целей укладки в приложении на основе react.

используя отдельную таблицу стилей, я устанавливаю фоновое изображение компонента и загружаю эту таблицу стилей в 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;
}

один из способов решить эту проблему явным образом требуйте изображения, а затем создайте встроенный стиль для компонентов 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: './'
  }
};

Я могу пропустить некоторые тривиальные моменты. Любая помощь приветствуется.

8
css javascript reactjs webpack webpack-style-loader

3 ответов

Аааа.... После долгих часов отладки я, наконец, нашел проблему. Это была моя глупость, из-за которой я боролся. Я хотел удалить этот вопрос, но подумал, что это поможет новичкам, как я, когда застрял в подобных проблемах.

здесь

loader: 'url-loader?limit=10000'

я устанавливал ограничение на размер файла 10kb не зная, что он делает. И изображение, которое я загружал, было размером 21kb ! Это происходит, когда вы копируете некоторые другие файлы конфигурации webpack:)признак усталости javascript !

13

при использовании webpack для загрузки 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');
4

У меня была аналогичная проблема, но с изображениями с '.расширение jpeg. Расширение изменить.по какой-то причине мне помог jpg.

0