Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to retain original url() when using webpack sass-loader

Tags:

webpack

Is there a way to keep my original images/ directory structure post webpack process of a SASS file. I don't want to hash the images or inline them. I want the URL() to look exactly as they were, relative to the sass file like so: ../images/*

original SCSS:

 background: url(../images/icon.gif);

webpack config:

{ test: /\.css$/,  loader: 'raw-loader' },
{ test: /\.scss$/,  loader: ExtractTextPlugin.extract('css!resolve-url!sass?sourceMap') },
{ test: /\.(png|gif|bmp)$/,  loader: "file-loader",  query: "name=[path][name].[ext]"            } 
                                        can anything be done here ^^^^^ to make it original path

output:

background:url(src/images/icons/icon.gif) 
like image 555
Elijah Avatar asked Oct 12 '25 11:10

Elijah


1 Answers

use https://github.com/bholloway/resolve-url-loader

        {
            test   : /\.css$/,
            loaders: ['style-loader', 'css-loader?url=false']
        }, {
            test   : /\.scss$/,
            loaders: ['style-loader', 'css-loader?url=false' , 'sass-loader?sourceMap']
        }

and for copy images use new CopyWebpackPlugin https://github.com/kevlened/copy-webpack-plugin

like image 112
Jenia Raf Avatar answered Oct 16 '25 06:10

Jenia Raf