How to skip all dependencies in css file using webpack

Question

I have test.css file which have a lot of dependencies, but I want to ignore all these dependencies in webpack 2.

test.css

.foo {
   background: url('../clear.png')
}

I tryed to use webpack.IgnorePlugin, but still have an error Module not found: Error: Can't resolve '../clear.png'

var webpack = require('webpack')
module.exports = {
    ...
    plugins: [
        new webpack.IgnorePlugin(/\.(jpe?g|png|gif|svg|ico|ttf|otf|eot|svg|woff(2)?)$/, /test.css/),
    ]
}

My whole webpack.js file is here.

Stanislav Mayorov · Accepted Answer · 2017-05-29 20:11:39Z

1

Problem: as webpack will not understand relative path if image is not there.

Soltuion:

1. use absolute path
2. use options and set url to false
3. use raw loder as it will loder url as string

Here are the example use cases.

module:{
    rules:[
        {
            test: /\.s[ac]ss$/,
            use: ExtractTextPlugin.extract({
                //use: ['css-loader', ‘sass-loader’]        ,
                use:[
                    {
                        loader: ‘css-loader’,
                        options: {url: false}
                    },

                    ‘sass-loader’
                ]
            })
        }   
    ]
}

Example with raw-loader

module: {
    rules:[
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
            use: ['raw-loader', ‘sass-loader’],
            fallback: ‘style-loader’
        })
    ]
}

also install raw-loader npm install raw-loader --save-dev

Want to use relative path then you should specify image urls too and use file-loader

it will move file and rename with some hash you can specify your own renaming options.

{

test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: ‘file-loader’, 
options: {
    name: ‘images/[name].[hash].[ext]’
}

}

Remember when using “options” field you have to use “loader” field instead of “use” field

So rule of the thumb is when using relative path make sure image exits there otherwise use absolute path.

edited May 29, 2017 at 20:11

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

answered May 29, 2017 at 15:05

owais

4,9325 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stanislav Mayorov Over a year ago

Thank you. I'll try it now.

Stanislav Mayorov Over a year ago

Yes. I don't have these img files in this relative path. I want just copy this urls without image files.

Collectives™ on Stack Overflow

How to skip all dependencies in css file using webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related