Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

597
Vistas
How to replace assets url()s in CSS files to a 3rd party domain in case of specific webpack build (angular 2)?

I want to use the url()s in my CSS in the following way:

.someImage {
    background: url(/assets/img/some-image.png);
}

In case I'm using development build (config/webpack.dev.js), I want it to to be translated to background: url(/assets/img/some-image.png); (as it works by default).

However In case I'm using production build (config/webpack.prod.js), I want it to be translated to background: url(http://some-3rd-party-domain.com/assets/img/some-image.png);

Think about the http://some-3rd-party-domain.com as it is a completely different domain than the one that servers the angular app.

Another important thing is that I don't want to replace all the paths in my css files. Which means that I want to replace url()s only if they match a specific path (in this example: /assets/*).

Is this possible without deep-hacking? If yes, how?

Here you can find some details from my current config:

The related part of config/webpack.common.js:

// ...
{
    test: /\.css$/,
    loader: extractVendorCSS.extract({ 
        fallbackLoader: 'style-loader', loader: 'css-loader' }),
    include: [/node_modules/]
},
{
    test: /\.css$/,
    use: ['to-string-loader', 'css-loader'],
    exclude: [/node_modules/]
},
{
    test: /\.(jpg|png|gif)$/,
    use: 'file-loader'
},
{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url'
}
// ...

Both config/webpack.dev.js and config/webpack.prod.js contains the environment specific URL info in the following way:

config/webpack.dev.js:

// ...
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://localhost:3000/assets/mock-data/';
const ASSETS_URL = process.env.API_URL = 'http://localhost:3000/assets/';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
    host: HOST,
    API_URL: API_URL,
    ASSETS_URL: ASSETS_URL,
    port: PORT,
    ENV: ENV,
});
// ...

config/webpack.prod.js:

// ...
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://some-api-url/rest/';
const ASSETS_URL = process.env.ASSETS_URL = 'http://some-3rd-party-domain.com/assets/';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
    host: HOST,
    API_URL: API_URL,
    ASSETS_URL: ASSETS_URL,
    port: PORT,
    ENV: ENV,
});
// ...

Thank you!

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

I think, you should check the documentation about publicPath: http://webpack.github.io/docs/configuration.html#output-publicpath

output: {
    path: "/home/proj/public/assets",
    publicPath: ENV === "development"? "/assets/" : "http://some-3rd-party-domain.com/assets/"
}

But there is one important moment:
you use an absolute path for images (background: url(/assets/img/some-image.png);) and css-loader will do nothing with your urls

You should switch to another syntax: background: url(~img/some-image.png);
more information in https://github.com/webpack-contrib/css-loader

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda