extract-text-webpack-plugin won't wrap font-face url path inside quote(s)

260 views Asked by At

Recently I am playing with extract-text-webpack-plugin to merge multiple css files into single big one. Everything works fine lately, but I am not content with "url path without quote" generated by this plugin. By now it generates url(path), how can I change it into url("path")

This is main.css generated by extract-text-webpack-plugin:

@font-face {
  font-family: 'fontello';
  src: url(/assets/fonts/fontello.eot);
  src: url(/assets/fonts/fontello.eot#iefix) format('embedded-opentype'),
       url(/assets/fonts/fontello.woff2) format('woff2'),
       url(/assets/fonts/fontello.woff) format('woff'),
       url(/assets/fonts/fontello.ttf) format('truetype'),
       url(/assets/fonts/fontello.svg#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}

but I would like to have all urls wrapped inside double quotes as following:

@font-face {
  font-family: 'fontello';
  src: url("/assets/fonts/fontello.eot");
  src: url("/assets/fonts/fontello.eot#iefix") format('embedded-opentype'),
       url("/assets/fonts/fontello.woff2") format('woff2'),
       url("/assets/fonts/fontello.woff") format('woff'),
       url("/assets/fonts/fontello.ttf") format('truetype'),
       url("/assets/fonts/fontello.svg#fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}

My webpack.config.js looks like this:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractTextCSS = new ExtractTextPlugin("assets/css/[name].css");

module.exports = {
    ...

    module: {
        rules:[                
            { test: /\.css$/, exclude: __dirname + "/node_modules/", use: extractTextCSS.extract("css-loader") },
            { test: /\.(eot|svg|ttf|woff|woff2)$/, exclude: __dirname + "/node_modules/", use: "file-loader?name=assets/fonts/[name].[ext]" }
        ]
    },


    plugins: [
        extractTextCSS
    ]
};
0

There are 0 answers