从“css-loader！./test.css”导入测试返回字符串答案

【问题标题】：import test from "css-loader!./test.css" returns string从“css-loader！./test.css”导入测试返回字符串
【发布时间】：2021-10-14 12:02:23
【问题描述】：

前言

我对 Webpack、Babel、Loaders 以及它们如何交互的了解几乎为零。

问题描述

我开发了一个最近迁移到 Angular 12 的 Angular 组件库。我目前正在为文档设置 Storybook。我想使用 Storybook 插件"@etchteam/storybook-addon-css-variables-theme" 在不同的 CSS 样式表之间切换。

通过这个插件的文档，我发现了 webpack 加载器语法，特别是对于延迟加载的样式表，即

import test from "!!style-loader?injectType=lazyStyleTag!css-loader!./test.css"

但是，在浏览器控制台中，我得到了Unhandled Promise rejection: file.use is not a function。

screenshot: browser console

我发现，我的主要问题与故事书无关，因为即使是简单的 css-loader 导入 url 也会返回纯字符串而不是对象。

我花了几天时间分析这个问题，但我真的束手无策。

环境

NodeJS 14.17.6
打字稿 4.3.x
Angular 12.2.10
Webpack 5.50.0
@babel/core 7.14.8
css-loader 6.4.0
postcss-loader 6.1.1

// tsconfig.json

// Please note: this part has been assembled from multiple files, it might contain typos...

{
  "compilerOptions": {
    "baseUrl": "./",
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "es2015",
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

复制

不幸的是，我无法使用例如设置最小复制。代码沙盒。但我能够使用新的 Angular 工作区在本地重现它：

$ npx -p @angular/cli@12 ng new css-loader-repro
$ npm i css-loader@6.4.0

// /typings.d.ts

declare module "*.css";

// /tsconfig.app.json

// notice: i've added "typings.d.ts" to "files" array!

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "typings.d.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

// /src/app/test.css

body {
  background-color: red;
}

// /src/app/app.component.ts

import testCss from 'css-loader!./test.css';
console.log(testCss);
console.log('type of testCss: ', typeof testCss);

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'css-loader-repro';
}

我期望看到的

打开控制台时，我希望 testCss 被打印为对象 (see screenshot)

我看到的却是

css-loader 的转换结果返回为string (see screenshot)

限制

我不想提供自定义 webpack 配置。对于实验，这很好，但对于我的库，我希望尽可能接近 Angular 标准。

【问题讨论】：

标签： angular webpack css-loader webpack-loader

【解决方案1】：

@Akxe 解决了我的问题：import css file into es6 returns string instead of object

使用import * as test from '...' 解决了我的问题。

【讨论】：