cannot - webpack css loader image url
Webpack no carga la imagen de fondo (2)
Uso el paquete de inicio de clase angular, así que no sé si tienes la clase "ayudantes" disponible.
dentro del paquete web / congif / common add a helper constant.
const helpers = require(''./helpers'');
dentro de tu resolución: agregar
root: helpers.root(''src''),
y dentro de los cargadores agregue:
{
test: //.html$/,
loader: ''raw-loader'',
exclude: [helpers.root(''src/index.html'')]
},
ahora cambie el cargador scss a este
{
test: //.scss$/,
exclude: /node_modules/,
loaders: [''raw-loader'', ''sass-loader'']
},
Ahora no estoy seguro si todavía puedes usar "include.path". Solo agrego "assets" dentro de la Url como "url (''./assets/img/whatever.png'').
Espero que ayude y buena suerte.
Estoy tratando de cargar una imagen:
background: transparent url("../img/select-icon.png") no-repeat center right 8px;
En mi style.scss y no funciona
Aquí está mi 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''),
},
}
}
Estoy usando el cargador de archivos, pero la URL que se muestra en el navegador no coincide con la URL de la imagen.
Creo que no estoy usando el mapa fuente: https://github.com/webpack/style-loader/issues/55
¿Alguien puede ayudar?
Para resolver el url (''...'') a la ruta de salida del archivo, necesita usar resolve-url-loader
antes del css-loader
.
En su webpack.config.js
necesita hacer los siguientes cambios:
//...
module: {
loaders: [
{
test: //.css$/,
include: path.resolve(__dirname, ''./assets/css/''),
loader: "style-loader!css-loader!resolve-url-loader"
},
{
test: //.scss$/,
include: path.resolve(__dirname, ''./assets/css/''),
loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
},
//...
]
}
//...
Como configuración opcional, puede especificar la plantilla de nombre de archivo que usa el file-loader
. Entonces, en lugar de tener 96ab4c4434475d0d23b82bcfc87be595.png
por ejemplo, puede tener /img/select-icon.png
.
En su webpack.config.js
las opciones predeterminadas del file-loader
. Esto significa que el nombre de archivo de salida está usando la plantilla [id].[ext]
. Siendo [id]
la [id]
del fragmento y [ext]
la extensión del archivo.
Para especificar la plantilla de nombre de archivo de salida, debe pasar el parámetro de name
a la consulta del cargador.
Hasta este punto, require(''../img/select-icon.png'')
debería devolver ''/img/select-icon.png''
. El resolve-url-loader
usará este valor.
//...
module: {
loaders: [
//...
{
test: //.png$/,
loader: ''file-loader'',
query: {
name: ''img/[name].[ext]''
}
},
//...
]
}
//...