Webpack doesn't create right paths for images in production css file

Question

To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.

The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.

The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.

Webpack Config:

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
  path: path.join(__dirname, 'public/'),
  filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },

    {
      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true
          }
        },
        'sass-loader'
      ]
    },

    {
      test: /\.(svg|gif|png)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images'
        }

      }
    },

    {
      test: /\.(otf|woff2|ttf|eot|woff)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }
    }

  ]
}

What am i missing in webpack config to achieve paths to work correcty?

tawreon · Accepted Answer · 2018-11-26 11:48:24Z

Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:

source-maps required for loaders preceding resolve-url-loader (regardless of devtool).

Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:

      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        'css-loader',
        {
          loader: 'resolve-url-loader',
          options: {
            root: path.join(__dirname, 'src')
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sourceMapContents: false
          }
        }
      ]
    }

UjinT34 · Accepted Answer · 2018-11-23 17:14:25Z

0

Check the documentation about problems with url(...). It suggests using resolve-url-loader.

Also you can try to use copy-webpack-plugin

answered Nov 23, 2018 at 17:14

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

1 Comment

tawreon Over a year ago

Files are copied correclty to public folder, the main problem with the paths to these files.

Collectives™ on Stack Overflow

Webpack doesn't create right paths for images in production css file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related