如何将CSS加载到Webpack 5中的JavaScript变量中？ 我有

style.css

script.mjs

webpack.config.mjs

package.json

预期的console.log输出 实际结果 存在postcss加载程序时，我收到生成错误：

PostCSS Loader has been initialized using an options object that does not match the API schema"

当webpack.config.mjs中没有postsss加载器时，我在console.log中得到了错误的输出：

// Imports
import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
import ___CSS_LOADER_URL_IMPORT_0___ from "./bg.svg";
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, "section {\n\tdisplay: flex;\n\tbackground: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}", ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;

---

请针对这两个不同的问题尝试这些修复

POSTSS加载程序未初始化：

控制台不应注销： 当前，CSS文件正在加载，但未转换为字符串，因此您会在控制台中看到垃圾。您需要将CSS文件中的文本作为字符串加载

首先在终端中执行以下操作

//install Systemjs
npm install systemjs
//install jspm
npm install jspm@0.16x -g
// change over to your project directory
cd my-project
//intall jspm into your project
npm install jspm@0.16x --save-dev
//initialise jspm
jspm init
//install text plugin
jspm install text

然后在脚本中.mjs

import './style.css!';
// Now, you can retrieve the contents of the file using the text plugin:
import css from './style.css!text';
console.log(css);

请注意：安装systemjs/text插件还有其他方法。有关更多安装信息，请参阅和

如果可行，请投票并接受答案。 如果不高兴，请排除故障。

---

快乐编码

请尝试

loader:'postsss loader'，选项：{postsssoptions:{plugins:[autoprefixer]}，

而不是

loader:'postsss loader'，选项：{plugins:[autoprefixer，]，}，

在您的webpack.config.mjs中，如果仍然不起作用，请尝试替换

[autoprefixer]，

像这样

[]，

&然后

rm-f package-lock.json&&rm-rf node\u模块和&npm安装

@Subha，是的，它修复了“PostCSS加载程序已使用与API架构不匹配的选项对象进行初始化”错误。谢谢！但console.log仍会输出“dirty”“css.很高兴它成功了。您能在修复后再次分享控制台记录的内容吗。@Subha，输出与所讨论的输出类似：

//导入u; css u加载器API u导入“节点”节点的工作模块/css装载机/节点节点的工作模块/css模块/css装载机/节点节点的工作模块/css模块/css装载机/域名/节点节点节点的工作模块/css模块模块/css加载机/css加载机/节点节点节点的工作模块/节点节点节点的工作模块/节点的工作模块/模块模块模块模块模块/css装载机/css加载机/css加载机/css加载机/css加载机/css加载机/输出/出口/出口/出口/出口/出口/出口/出口/出口/UUUUUUU两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两两//模块uuuuuuuuu css\u加载程序uuuuu导出uuuuuuuu.push（[Module.id，”第{\n\tdisplay:flex；\n\tbackg…

节进行了一些疑难解答并发布了答案。请检查它是否有效。谢谢！我稍后会尝试并对结果进行评论。@mihail haritonov欢迎。如果它有效，如果你能接受我的答案，我将知道它有效。再次感谢，它不起作用（我得到了答案）“找不到模块：错误：无法解析“/home/m/projects/upwork/webpack test”中的“text”），我切换到使用config

plugins:[postsss（{plugins:[cssurl（{url:'inline'}）]进行汇总。

display: -webkit-box;display: -ms-flexbox;display: flex;background: url('data:image/svg+xml;utf8,...');

PostCSS Loader has been initialized using an options object that does not match the API schema"

// Imports
import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
import ___CSS_LOADER_URL_IMPORT_0___ from "./bg.svg";
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, "section {\n\tdisplay: flex;\n\tbackground: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}", ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;

  //....{
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              autoprefixer,
            ],
          },
        },
      }, //....

//install Systemjs
npm install systemjs
//install jspm
npm install jspm@0.16x -g
// change over to your project directory
cd my-project
//intall jspm into your project
npm install jspm@0.16x --save-dev
//initialise jspm
jspm init
//install text plugin
jspm install text

import './style.css!';
// Now, you can retrieve the contents of the file using the text plugin:
import css from './style.css!text';
console.log(css);