链接其他加载器时用资产模块替换文件加载器

Question

我有以下 webpack v4 模块：

{
  test: /atffonts\.scss$/,
  use: [
        {
          loader: 'file-loader',
          options: {
            name: 'style/[name].css',
          },
        },
        'extract-loader',
        'css-loader',
        'sass-loader',
  ],
}

这段代码的目的是获取一个 SCSS 文件和 output 一个有效的新文件 CSS。

我正在尝试迁移到 Webpack v5 并使用资产模块。 我知道可以继续使用已弃用的文件加载器语法，但我试图不再依赖于此已弃用的功能。

我将上面的代码重写为：

 {
  test: /atffonts\.scss$/,
  type: 'asset/resource',
  generator: {
    filename: 'style/[name].css',
  },

  use: [
    'extract-loader',
    'css-loader',
    'sass-loader',
  ],
}

此代码 output 一个文件，但文件的内容无效 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(); });
}

我不清楚我正在尝试做的事情是否与资产模块范式兼容。

我走在正确的道路上但忽略了什么吗？ 或者我现在应该为此目的继续使用已弃用的文件加载器吗？

Answer 1

我使用MiniCssExtractPlugin做了类似的事情

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

use : [
  MiniCssExtractPlugin.loader,
  "css-loader",
  "sass-loader",
],

提醒：你必须通过 npm/yarn 安装 loader

希望这对你有用，对我也有用