我能夠輸出一個資產庫和許多其他庫，這些庫作為遠程聯合模塊和深度匯入庫，以防我沒有連接到遠程或我沒有在消費者端使用 webpack。
現在的問題是我的所有資產都匯出一個模塊，該模塊將原始資料作為 uri 或指向正確資產的字串。例如：bird.svg 用它的散列加上決議為檔案bird-[hash].svg 的模塊輸出到灰塵中。
上面的內容來自 javascript，但對 css 來說不是很多。現在我無法重寫 url() 以指向正確的遠程路徑，這將是 sg 像：
//since I don't know when the assets will change names I can't refer to it directly. So I would need to first read the string from the bird.js module. Append the publicPath and then rewrite the url.
.someClass {
background-image: url('/assets/bird.js')
}
//the above won't work for obvious reasons.
所以，問題是我該如何解決這個問題？或者是否有任何裝載機？我檢查了決議 url 加載器，但似乎不需要。
uj5u.com熱心網友回復：
好的，我通過將附加資料作為變數傳遞給 sass-loader 解決了這個問題。這樣我就可以評估檔案的實際名稱，并將其作為 sass 映射放在之前并從 sass 處理它。
//I am using glob to return an object with all the assets.
//This can probably be automated better. That would be an easier way.
//But this way works for me in all 3 scenarios, node, browser and federated module.
//Also has caching ootb for the assets.
const assetsPaths = {
...glob.sync('../assets/dist/img/**.node.js').reduce(function (obj, el) {
obj['img/' path.parse(el).name] = '../../assets/dist/' require(el).default;
return obj
}, {}), ...glob.sync('../assets/dist/fonts/**.node.js').reduce(function (obj, el) {
obj['fonts/' path.parse(el).name] = '../../assets/dist/' require(el).default;
return obj
}, {})
};
//...
{
loader: 'sass-loader',
options: {
additionalData: "$assets: '" assetsMap "';",
sourceMap: true,
sassOptions: {
outputStyle: "compressed",
},
}
},
//...
您還需要禁用 url 重寫
{
loader: 'css-loader',
options: {
url: false,
}
},
然后你可以在你的 sass 檔案中使用資產映射：
@font-face {
font-family: 'Some Font';
src: local('Some Font');
src: url("#{map-get($assets, SomeFont)}");
}
您可能需要將您的專案設定排序為單聲道存盤庫，并且您還需要使用兩個捆綁包構建這些資產庫。
一個用于節點，因此您可以在捆綁 sass/任何內容時使用指向實際資產的字串路徑。另一個用于正常從瀏覽器加載它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400853.html
標籤：javascript css 网络包