Path's in stylesheets to images folder

Hello,

i worked alwase with GruntJs. Now i switching to 5.4 and Laravel Mix. Here are my files.

webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

mix.copy('resources/assets/images/', 'public/images/', false); // Don't flatten!

My app.scss is:

span.loader
{
    background: url(../images/loader.gif) no-repeat center center;
}

Now i ran npm run dev... and the result is:

span.loader {
  background: url(./loader.gif?6407495c57fb47ec9615edf51ae5c738) no-repeat center center;
}

but i copied all images to the public/images/ folder. The url must be image/loader.gif6407495c57fb47ec9615edf51ae5c738

How can i change the path to the images folder? The path to the loader.gif is always ./

Greetings

rslanzi

9 years ago

Level 33

+1 for me! Same problem!

3 likes

husakja

9 years ago

Level 1

Hello, I had similar problem. I wanted to compile less to /css folder and copy its images to /img folder which wasn't the case for default configuration. This is what I ended with: webpack.mix.js

mix.less('resources/assets/less/style.less', 'public/css')
    .less('resources/assets/less/admin/admin.less', 'public/css')
    .js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/admin/admin.js', 'public/js')
    .version();

webpack.config.js - lines 98 - 104, publicPath attribute will be used in compiled css files

        {
            test: /\.(png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
                name: 'img/[name].[ext]?[hash]', // add img/
                publicPath: '../', // add whole line
            }
        },

package.json - change --config variable to point to my webpack.config

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

Hope this helps .)