Search code examples
javascriptwebpackwebpack-2

Webpack 2 CSS with wrong path to font and images

I'm having a problem with my configuration of WebPack2, because it places the font and images in the directories I want, but it makes the CSS urls point to another directory..

My Original CSS (SASS after being compiled by compass) and fonts have the following structure CSS/FONT Structure

The font-face here are correct:

@font-face {
 font-family: 'FS Albert Web Regular';
 src: url("../fonts/FSAlbertWeb-Regular.eot");
 src: url("../fonts/FSAlbertWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FSAlbertWeb-Regular.woff2") format("woff2"), url("../fonts/FSAlbertWeb-Regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}
.
.
.

The javascript where I require my css is located here

Require JS

and has the css require:

require("../../css/app.css");

My Webpack configuration is like this 

var PRODUCTION = process.env.NODE_ENV === "production";

const cssIdentifier = PRODUCTION
  ? '[hash:base64:10]'
  : '[path][name]--[local]';

const cssLoader = PRODUCTION
    ? ExtractTextPlugin.extract({
        fallback: "style-loader",
        publicPath: "",
        use: 'css-loader?localIdentName=' + cssIdentifier
    })
    : [
      { loader: 'style-loader' },
      {
          loader: 'css-loader?localIdentName=' + cssIdentifier,
          options: { sourceMap: true }
      }
    ];

module.exports = {
    entry: {
        "header": './assets/campus/common/js/_deployment/header.js'
    },
    output: {
        path: path.resolve(__dirname, './assets/dist'),
        publicPath: '/assets/dist',
        filename: '[name].bundle.js',
        chunkFilename: "[name].commons.js"
    },
    module: {
        rules: [
        {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
              // vue-loader options go here
           }
        },
        {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/
        },
        {
           test: /\.(eot|svg|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
              name: './font/[name].[ext]'
           },
           exclude: /node_modules/
        },
        {
           test: /\.(png|jpg|gif|svg)$/,
           loader: 'file-loader',
           options: {
              name: './img/[name].[ext]?[hash]'
           }
       },
       {
           test: /\.css$/,
           use: cssLoader
       }
    ]
}

My files are copied where I want them:

Result

But my fonts (and my Images) have now a wrong Url (It doesn't go up on level in the structure)

@font-face{
    font-family:FS Albert Web Regular;
    src:url(./font/FSAlbertWeb-Regular.eot);
    src:url(./font/FSAlbertWeb-Regular.eot?#iefix) format("embedded-opentype"),url(./font/FSAlbertWeb-Regular.woff2) format("woff2"),url(./font/FSAlbertWeb-Regular.woff) format("woff");
    font-weight:400;
    font-style:normal}

What am I doing wrong?

Thanks for the help

Solution

  • Just in case someone stumbles on it.... I had to change the 

    publicPath: ""

    of my cssloader to 

    publicPath: '/assets/dist'