es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Hay algún problema al usar CSS-loader y url-loader?

Cuando uso CSS-loader, establezco las opciones del valor de URL en falso, entonces mi url-loader no manejará la imagen que se usa en background-url. A continuación se muestra mi configuración, ¿dónde está mi problema?

Configuración de css-loader:

exports.cssLoaders = function(options) {
  options = options || {};

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      url: false,
    }
  };

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  };

  // Generar cadena de carga para usar con el plugin extract-text
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS
      ? [cssLoader, postcssLoader]
      : [cssLoader];

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    // Extraer CSS cuando se especifica esa opción
    // (que es el caso durante la compilación de producción)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      });
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  };
};

Configuración de url-loader:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/assets/icon')],
  options: {
    limit: 10000,
    publicPath: publicAssetsPath,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    publicPath: publicAssetsPath,
    name: utils.assetsPath('media/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    publicPath: '../../',
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

No puedo usar publicPath: '../../' en todos los casos porque cuando el elemento <img> usa “url” la ruta se volverá incorrecta. ¿Hay alguna forma de resolver este problema? ¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    El problema es que al establecer url: false en las opciones de css-loader, el cargador no manejará ninguna URL y las dejará tal como están. Esto significa que cualquier propiedad background-image que use un valor url() no será procesada por el url-loader.

    Para solucionar este problema, puedes eliminar la opción url: false de la configuración del css-loader, o puedes usar un cargador diferente específicamente para manejar imágenes de fondo, como el file-loader.

    Aquí tienes un ejemplo de cómo podrías configurar el file-loader para manejar imágenes de fondo:

    {
      test: /\.(png|jpe?g|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[hash:7].[ext]',
          outputPath: 'img/',
          publicPath: '../img/' // usa el número adecuado de "../" para llegar a la raíz del archivo CSS
        }
      }]
    }
    

    Ten en cuenta que es posible que debas ajustar el valor de publicPath en función de la ubicación de tu archivo CSS en relación a la raíz del sitio web.

Comments are closed.