Watch and Build creating two different image paths for background images in css

sage
,
1

I cannot seem to figure out the right recipe for public path in config, as well as a reference to the image path in the css so that background images in the ‘yarn run start’ mode work.

    {
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/msgpwebteam",
  "devUrl": "http://localhost:8080/FSX",
  "proxyUrl": "http://localhost:3000/FSX",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

and then in my css i’d have something like

`background: url($image-path + 'image.jpg');`

with

$image-path: '../images';

My output on the start option is

background: url(http://localhost:3000/FSX/../images/bg-image.jpg);

while with build it’s

`http://localhost:8080/FSX/wp-content/themes/msgpwebteam/dist/images/bg-image.jpg`

What needs to be done so these are consistent?

2

I might be missing something, it’s late, but why do they need to be consistent? start is intended to create an auto-refreshing development environment for quick review of your work while you work; build is intended to be the final (or at least static, non-refreshing) output. What situation do you need them to be identical?

3

in the case of declaring background images in the css.

in ‘start’ it gets transpiled wrong unless I append the theme name in the public path. In build, I only need ‘/wp-content/themes/theme name’

so any styles with a background image have to be debugged using the build, which takes forever

4

also, my background images in css are not getting a hash when i run the build with the production flag.

5

Do you get correct URLs if you write your CSS background image defintions w/o the variable? i.e.

background: url('../images/image.jpg');
1 Like
6

gave that a try but what ended up happening is the following:

(It’s been a while since I visited the code of this current site so I’m not sure if this was the default webpack.config settings)

changed

{
    test: /\.css$/,
    include: config.paths.assets,
    use: ExtractTextPlugin.extract({
      fallback: 'style',
      use: [
        { loader: 'cache' },
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps, url: false } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
      ],
    }),
  },
  {
    test: /\.scss$/,
    include: config.paths.assets,
    use: ExtractTextPlugin.extract({
      fallback: 'style',
      use: [
        { loader: 'cache' },
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps, url: false } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
        { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
        { loader: 'sass', options: { sourceMap: config.enabled.sourceMaps } },
      ],
    }),
  },

to

{
    test: /\.css$/,
    include: config.paths.assets,
    use: ExtractTextPlugin.extract({
      fallback: 'style',
      use: [
        { loader: 'cache' },
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps, url: true } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
      ],
    }),
  },
  {
    test: /\.scss$/,
    include: config.paths.assets,
    use: ExtractTextPlugin.extract({
      fallback: 'style',
      use: [
        { loader: 'cache' },
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps, url: true } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
        { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
        { loader: 'sass', options: { sourceMap: config.enabled.sourceMaps } },
      ],
    }),

just set the url option to true, which then led me to having to append -loader and adding the url-loader to the package.json file.