Wie kann ich den load image(s) in sass-stylesheet im webpack?
Ich bin mit Webpack zu bündeln, meine Module und mit sass für styling Sinn in einen reagieren basierte Anwendung.
Verwendung einer separaten style-sheet ich bin der Einstellung von hintergrund-Bild von einer Komponente geladen und das style-sheet in index.js
. Alle Stile, die im style-sheet angewendet wird, um die Komponente außer Hintergrundbild.
Hier ist mein Beispiel-Stylesheet
$bg-img: url('/img/bg.jpg');
.show {
position: relative;
background: $black $bg-img center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
Einen Weg, um dieses problem zu lösen würde explizit verlangen, das Bild und erstellen Sie inline-Formatvorlagen für Komponenten reagieren.
img1 = document.createElement("img");
img1.src = require("./image.png");
Aber ich will laden Sie alle Bilder aus meinem Bilder-Ordner, sobald mein style-sheet lädt nicht durch eine jedes Bild separat.
Mein webpack config-Datei ist
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: './'
}
};
Ich möglicherweise fehlen ein paar unbedeutende Punkte. Jede Hilfe ist willkommen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ahh.... Nach einer langen Stunden Debuggen habe ich endlich das Problem. Es war meine Dummheit, weil von denen ich kämpfte. Ich wollte löschen Sie diese Frage, aber dachte, dass es helfen würde Neulinge wie mich, wenn das stuck zu ähnlichen Themen.
Problem war hier
loader: 'url-loader?limit=10000'
Ich setzte das limit der Dateigröße von 10kb, ohne wirklich zu wissen, was es tut. Und das Bild, das ich geladen war, von der Größe 21kb ! Dies geschieht, wenn Sie kopieren einige andere webpack config-Dateien 🙂 Zeichen der javascript-Müdigkeit !
Wenn mit webpack zum laden der css-und der Vermögenswerte, die Sie zugreifen, Ihre css muss, Folgen Sie den gleichen Modulnamen Regeln, die Sie in Ihrem JavaScript -
import
oderrequire
Anrufe.Vorausgesetzt, die
img
Ordner ist in den root von deinem source-tree, sollten Sie darauf verweisen, wie dies in scss:Oder gehen Sie einfach völlig relativ. Vorausgesetzt, dass Sie Ihre source-code ist wie folgt:
Ihre
styles.scss
könnte einen relativen Pfad verwenden:Ich hatte ähnliches problem aber mit Bildern mit.jpeg' Erweiterung. Ändern Sie die Erweiterung zu".jpg' hat mir geholfen, für einige Grund.