最近我正在使用extract-text-webpack-plugin将多个css文件合并为单个大文件。最近一切正常,但我不满足于这个插件生成的“没有引用的url路径”。现在它生成url(path)
,如何将其更改为url("path")
这是main.css
生成的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;
}
但我希望所有网址都包含在双引号中,如下所示:
@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;
}
我的webpack.config.js
看起来像这样:
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
]
};