Webpack nicht be-hintergrund-Bild
Ich versuche, laden Sie ein Bild:
background: transparent url("../img/select-icon.png") no-repeat center right 8px;
In meinem Stil.scss, und es funktioniert nicht
Hier ist mein webpack.config:
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
})
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader'
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),
},
}
}
Ich bin mit dem Datei-loader, aber die url gerendert im browser stimmt nicht überein mit der url des Bildes.
Ich denke, dass ich nicht mit Quelle anzeigen: https://github.com/webpack/style-loader/issues/55
Kann jemand helfen?
- Kannst du die falsche url in Ihren browser?
- background: transparent url(96ab4c4434475d0d23b82bcfc87be595.png) no-repeat center right 8px; - Diese hash-Punkte, um localhost//app/Kontakt/Formular/add/1/.... Aber ich denke, dies sollte zeigen Sie auf localhost/static/img/96ab4c4434475d0d23b82bcfc87be595.png
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beheben, url ('...'), um die Ausgabe-Datei-Pfad, den Sie verwenden müssen
resolve-url-loader
vor dercss-loader
.In Ihrem
webpack.config.js
müssen Sie die folgenden änderungen vornehmen:Als eine optionale Konfiguration, die Sie können geben Sie den Dateinamen der Vorlage, dass die
file-loader
verwendet. Also anstatt96ab4c4434475d0d23b82bcfc87be595.png
zum Beispiel, Sie haben/img/select-icon.png
.In Ihrem
webpack.config.js
den Standard-Optionen derfile-loader
verwendet werden. Dies bedeutet, dass die output-Dateinamen ist die Verwendung der Vorlage[id].[ext]
. Als[id]
die chunk-id und die[ext]
die Erweiterung der Datei.Angeben, den Namen der Ausgabedatei Vorlage, die Sie brauchen, um passieren die
name
parameter an die Abfrage der loader.Bis zu diesem Zeitpunkt
require('../img/select-icon.png')
zurückkehren sollte'/img/select-icon.png'
. Dieresolve-url-loader
wird diesen Wert verwenden.Ich den Winkel-Klasse-starter-Pack also ich weiß nicht, ob Sie haben die "Helfer" - Klasse zur Verfügung.
innerhalb der webpack congif /common fügen Sie einen Helfer konstant.
innerhalb Ihrer Behebung: fügen Sie
und in den Lader hinzufügen:
nun ändern Sie die scss-loader zu diesem
Bin jetzt nicht sicher, ob Ihr noch in der Lage zu verwenden "enthalten.Weg" ich habe nur noch "Vermögen" innerhalb der Url, wie so ein "url ('./assets/img/was auch immer.png').
Hoffe, das hilft und viel Glück.