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

编程问答 2022-05-03

问题描述

我有

style.css

section {
    display: flex;
    background: url('./bg.svg');
}

script.mjs

import css from './style.css'
console.log(css)

webpack.config.mjs

import path from 'path'
import url from 'url';
import autoprefixer from 'autoprefixer'

const __dirname = path.dirname(url.fileURLToPath(import.Meta.url))

export default {
  mode: 'production',context: path.resolve(__dirname),entry: path.resolve(__dirname,'script.mjs'),output: {
    path: path.resolve(__dirname,'build'),filename: `[name].js`,},module: {
    rules: [
      {
        test: /\.(svg|png|jpg|jpeg)$/,type: 'asset/inline',{
        test: /\.css$/,type: 'asset/source',use: [
          'css-loader',{
            loader: 'postcss-loader',options: {
              plugins: [
                autoprefixer,],}

package.json

{
  "scripts": {
    "build": "webpack --config webpack.config.mjs"
  },"devDependencies": {
    "autoprefixer": "~10.2.5","css-loader": "~5.2.4","postcss-loader": "~5.2.0","webpack": "~5.36.2","webpack-cli": "~4.6.0"
  }
}

预期的 console.log 输出

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

实际结果

当存在 postcss-loader 时出现构建错误：

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

当 webpack.config.mjs 中没有 postcss-loader 时，我在 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___;

解决方法

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

  1. PostCSS 加载器未初始化：
  //....{
        loader: "postcss-loader",options: {
          postcssOptions: {
            plugins: [
              autoprefixer,],},//....
  1. 控制台未按预期注销： 目前，CSS 文件正在加载但未转换为字符串，因此您会在控制台中看到垃圾。您需要 systemjs/text plugin 将 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

然后在你的 script.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 插件的方法。有关更多安装信息，请参阅 systemjs/text 和 systemjs。

如果可行，请点赞并接受答案。 如果不乐意解决。 快乐编码！！

javascriptpostcss-loaderwebpack-5