我正在用Webpack 5把我的SCSS编译成CSS。我想有选择地内联一些SVG。理想情况下,我想通过文件名、路径或URL中的一些查询参数来实现这一点。
假设我有以下SCSS:
/* src/scss/main.scss */
.logo {
background-image: url('/images/logo.svg');
}
而这个webpack.config.js
:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const src_dir = path.resolve(__dirname, "src");
module.exports = {
entry: {
"styles": path.resolve(__dirname, "src/scss/main.scss")
},
output: {
clean: true,
path: path.resolve(__dirname, "dist"),
publicPath: "",
},
module: {
rules: [ ... ]
},
plugins: [
// Extract the generated CSS from the JS-CSS into actual CSS.
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
}),
]
}
这是我将SCSS编译为CSS的规则(如果相关):
{
test: /\.scss$/,
use: [
// Extract the generated CSS from the JS-CSS into actual CSS.
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
}
},
{
loader: 'css-loader',
},
// Compile SCSS to JS-CSS.
{
loader: 'sass-loader',
options: {
sassOptions: {},
sourceMap: true
}
}
]
},
这是我目前的资产规则:
{
test: /\.(jpg|png|svg)$/,
type: "asset/resource",
generator: {
// Do not copy the asset to the output directory.
emit: false,
// Rewrite asset filesystem path to be relative to the asset public path.
filename: (pathData) => {
const file = pathData.module.resource;
if (file.startsWith(`${src_dir}/`)) {
return path.relative(src_dir, file);
}
throw new Error(`Unexpected asset path: ${file}`);
},
// The public path (prefix) for assets.
publicPath: "/a/",
}
}
如何将新规则配置为仅内联logo.svg
?根据我收集到的信息,我需要沿着于以下内容的内容:
{
test: /\.svg$/,
type: "asset/inline",
// ... some unknown webpack-fu.
},
但是我该怎么做呢?webpack文档中非常缺乏任何有用的CSS示例。这不是一个JavaScript应用程序,其中每个资产都使用require()
导入。我只使用SCSS/CSS。
1条答案
按热度按时间k2arahey1#
您可以做的是将
?inline
作为查询参数添加到SVG URL中:添加
/inline/
作为内联规则上的resourceQuery:并使用oneOf Package 资产规则,以便在常规资源规则之前优先内联标记的SVG: