Webpack relativ css url() mit file-loader/css-loader

Question

ich bin ziemlich neu zu webpack/npm und ich versuche zu verstehen, wie man mit css urls in anderen projektabhängigkeiten arbeiten.

Ordnerstruktur

src 
    fonts/ 
    scss/ 
    app.scss 
    js/ 
    app.js 
    img/ 
    index.html 

webpack.config.js

var path = require('path'); 
var extractPlugin = require('extract-text-webpack-plugin'); 
var cleanWebpackPlugin = require('clean-webpack-plugin'); 
var htmlWebpackPlugin = require('html-webpack-plugin'); 
var webpack = require("webpack"); 

module.exports = { 
    entry: './src/js/app.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'js/app.js' 
    }, 
    devServer: { 
     stats: 'errors-only', 
     compress: true, 
     open: true, 
     port: 9000 
    }, 
    module: { 

     rules: [ 

      // ES6 -> ES5 transpiler 

      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['es2015'] 
        } 
       } 
      }, 

      // SCSS to CSS -> Autoprefix -> Load CSS 

      { 
       test: /\.(scss|css)$/, 
       use: extractPlugin.extract({ 
        use: [ 
         'css-loader', 
         { 
          loader: 'postcss-loader', 
          options: { 
           plugins: (loader) => [require('autoprefixer')()] 
          } 
         }, 
         'sass-loader' 
        ] 
       }) 
      }, 

      // HTML Loader 
      { 
       test: /\.html$/, 
       use: ['html-loader'] 
      }, 

      // Image Loader 
      { 
       test: /\.(jpg|png|svg|gif)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          outputPath: 'img/', 
          name: '[name].[ext]' 
         } 
        } 
       ] 
      }, 
      // Font Loader 
      { 
       test: /\.(eot|ttf|woff)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          outputPath: 'fonts/', 
          name: '[name].[ext]' 
         } 
        } 
       ] 
      } 


     ] 

    }, 
    plugins: [ 
     new extractPlugin({filename: 'scss/app.css'}), 
     new cleanWebpackPlugin(['dist']), 
     new htmlWebpackPlugin({ template: 'src/index.html' }), 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) 
    ] 
}; 

Ich habe erfolgreich lightGallery wie so in meinem Projekt enthalten:

app.js

import 'lightgallery'; 

app.scss

@import '~lightgallery/dist/css/lightgallery.css'; 

Die Lichtgalerie Sheet Referenzen Schriften, die ich erfolgreich in die fonts/ Laden bin den webpack mit file-loader

Mein Problem ist, dass die eingebaute CSS-Datei ist Ich versuche, die Fonts aus dem scss-Ordner anstatt aus meinem root zu referenzieren.

dh: http://localhost:9000/scss/img/loading.gif

Ich brauche hierbei alle von CSS verknüpften Assets von meinem root dir

dh http://localhost:9000/img/loading.gif

Gibt es trotzdem lösen kann ich meine CSS-loader konfigurieren, dass alle URL vorangestellt mit a /?

Hilfe!

Answer 1

Die file-loader respektiert output.publicPath, aber da Sie es nicht festgelegt haben, wird der resultierende Pfad ein relativer Pfad sein. Sie können den öffentlichen Pfad auf / festlegen.

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'js/app.js', 
    publicPath: '/' 
}, 

Dies betrifft auch andere Loader und Plugins, die mit allen Assets umgehen. Dies ist im Allgemeinen, was Sie wollen und daher empfohlen, aber wenn Sie es nur für bestimmte Dateien ändern möchten, können Sie die publicPath Option auf file-loader verwenden.

{ 
    loader: 'file-loader', 
    options: { 
     outputPath: 'img/', 
     name: '[name].[ext]', 
     publicPath: '/' 
    } 
}