我有以下 webpack v4 模塊：
{
test: /atffonts\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'style/[name].css',
},
},
'extract-loader',
'css-loader',
'sass-loader',
],
}
此代碼的目的是獲取一個 SCSS 檔案并輸出一個有效 CSS 的新檔案。
我正在嘗試遷移到 Webpack v5 并使用資產模塊。我了解可以繼續使用已棄用的檔案加載器語法，但我試圖不繼續依賴此已棄用的功能。
我將上面的代碼改寫為：
{
test: /atffonts\.scss$/,
type: 'asset/resource',
generator: {
filename: 'style/[name].css',
},
use: [
'extract-loader',
'css-loader',
'sass-loader',
],
}
此代碼確實輸出了一個檔案，但該檔案的內容不是有效的 CSS。相反，檔案的內容是：
var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/style-loader/index.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./atffonts.scss");
if(typeof content === 'string') content = [[module.id, content, '']];
var transform;
var insertInto;
var options = {"hmr":true}
options.transform = transform
options.insertInto = undefined;
var update = require("!../../node_modules/style-loader/lib/addStyles.js")(content, options);
if(content.locals) module.exports = content.locals;
if(module.hot) {
module.hot.accept("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/style-loader/index.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./atffonts.scss", function() {
var newContent = require("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/style-loader/index.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./atffonts.scss");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
var locals = (function(a, b) {
var key, idx = 0;
for(key in a) {
if(!b || a[key] !== b[key]) return false;
idx ;
}
for(key in b) idx--;
return idx === 0;
}(content.locals, newContent.locals));
if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');
update(newContent);
});
module.hot.dispose(function() { update(); });
}
我不清楚我正在嘗試做的事情是否與資產模塊范式兼容。
我在正確的道路上但忽略了一些東西嗎？或者我現在應該為此目的繼續使用已棄用的檔案加載器嗎？
uj5u.com熱心網友回復：
我使用MiniCssExtractPlugin做了類似的事情
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
use : [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
提醒：你必須通過 npm/yarn 安裝 loader
希望這對你有用，對我有用
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/459120.html