cannot - webpack css loader image url

Webpack no carga la imagen de fondo

Question

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?

Answer 1

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.

Answer 2

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 96ab4c4434475d0d‌​23b82bcfc87be595.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]''
}
},
//...
]
}
//...