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

Question

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

Я использую Webpack для связывания моих модулей и использую sass для стилизации в приложении на основе 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;

}

Одним из способов решения этой проблемы было бы явное требование изображения, а затем создать встроенный стиль для компонентов реакции.

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

  }

};

Возможно, я упускаю некоторые тривиальные моменты. Любая помощь ценится.

592 3

javascript css reactjs webpack webpack-style-loader

3 ответов:

Comments

Ничего не найдено.

WitVault · Accepted Answer · 2016-02-11 00:43:59

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

Проблема была здесь

loader: 'url-loader?limit=10000'

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

Brandon · Accepted Answer · 2016-02-10 23:27:36

При использовании 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');

Aliaksei · Accepted Answer · 2017-08-17 12:22:45

У меня была похожая проблема, но с изображениями с '.расширение jpeg. Измените расширение на '.jpg мне почему-то помог.