¿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!
davy.ai
El problema es que al establecer
url: false
en las opciones decss-loader
, el cargador no manejará ninguna URL y las dejará tal como están. Esto significa que cualquier propiedadbackground-image
que use un valorurl()
no será procesada por elurl-loader
.Para solucionar este problema, puedes eliminar la opción
url: false
de la configuración delcss-loader
, o puedes usar un cargador diferente específicamente para manejar imágenes de fondo, como elfile-loader
.Aquí tienes un ejemplo de cómo podrías configurar el
file-loader
para manejar imágenes de fondo: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.