Wrong image paths in css for production builds= about webpack-boilerplate HOT 10 CLOSED

I can take a look.

from webpack-boilerplate.

@nelsonvassalo Can you please explain what you're trying to do? I just tested background-image URLs in scss files in folders, and it worked just fine on dev and build.

Generally, with SCSS you'll have index.scss that imports everything else.

// index.scss
@import 'config/variables';
@import 'components/example';

Then from the folder, you'll refer to the URL based on the index directory.

// components/_example.scss
.card {
  background: url('../images/favicon.png');
}

You can test this right now and build or start and it'll work just fine. Please let me know or I'm closing this issue.

from webpack-boilerplate.

Hi,

It works fine yes, but the output urls are not relative to css file but to the root (starting with '/'), which means if I host the sites elsewhere but the root they start failing. Was that clear?

from webpack-boilerplate.

@nelsonvassalo You mean if you host your website on https://www.example.com/subdirectory vs https://www.example.com/?

from webpack-boilerplate.

from webpack-boilerplate.

@nelsonvassalo Where are you putting your Webpack config relative to the directory? You should be able to put publicPath:

  output: {
    path: paths.build,
    publicPath: './subdirectory/'
    filename: '[name].[contenthash].bundle.js',
  },

from webpack-boilerplate.

I made an update, let me know if it fixes your issue. (You'll just need to update publicPath from / to /yourdirectory.

from webpack-boilerplate.

Thanks!

It would still make them relative to root I think. To manage it's dependency free from root I've noticed you can pass a new publicPath option to MiniCSSExtract.loader. Right now you0ve hardcoded ../../. It seems this can be made actually relative by passing in the following function as value:

options: {
  publicPath: (resourcePath, context) => {
      // publicPath is the relative path of the resource to the context
      // e.g. for ./css/admin/main.css the publicPath will be ../../
      // while for ./css/main.css the publicPath will be ../
        return path.relative(path.dirname(resourcePath), context) + '/';
      }
  }
…
}

from webpack-boilerplate.

Did you try it with the latest update? publicPath was removed from MiniCSSExtract.loader and moved to output in webpack.prod.js. You should be able to put /yourdirectory in publicPath of ouput. I don't 100% understand your setup and where you have your files located so I can't test it myself.

from webpack-boilerplate.

I'm going to close this issue, feel free to re-open if the issue persists.

from webpack-boilerplate.