0

I am trying to output a different URL for my background images when my project is built.

My current CSS image path is:

./src/components/assets/images....

What I want when built:

/images/default-source/images/icon.png

I have tried different things such as options within the css-loader but none of them have worked. Usually, it will cause a problem when running the project as It can't find the images.

Directories:

/build/main.css
/src/components/assets/css/main.css
/src/components/assets/images/

/webpack.config.js 

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { 
        loader: 'css-loader',
        options: { 
          url: false ,
        }
      },
      { 
        loader: 'postcss-loader' 
      },
      { 
        loader: 'sass-loader',
      },
    ],
  }),
},

I have thought maybe using some sort of find and replace during the build. What is the best solution?

Rob Fyffe
  • 719
  • 1
  • 8
  • 22

1 Answers1

0

try to add this on your webpack.config.js or during the build of your app

npm run build --output-public-path='/images/default-source/'

No sure if webpack 3 still accept didn't tested, regards

  • Thanks for the response. It did work, but wasn't exactly what I needed. I was able to achieve what I wanted through the use of an Alias and moving my images to the root of the App. Not sure if this the best method but it seems to work. – Rob Fyffe Sep 06 '17 at 15:48
  • It can be a little bit more secure lol. you can also add a shell script after the build to mv /source /destination –  Sep 06 '17 at 15:56