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
]
};