从 "css-loader!./test.css" returns 字符串导入测试

Question

前言

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

问题描述

我开发了一个 Angular 组件库，最近迁移到了 Angular 12。我目前正在为文档设置 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 returns 一个普通字符串而不是一个对象。

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

环境

节点 14.17.6
打字稿 4.3.x
Angular 12.2.10
Webpack 5.50.0
@babel/core 7.14.8
css-装载机 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 标准。

Answer 1

@Akxe 解决了我的问题：

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

从 "css-loader!./test.css" returns 字符串导入测试

import test from "css-loader!./test.css" returns string

webpack

css-loader

angular

webpack-loader

前言

问题描述

环境

复制

我希望看到的

我看到的是什么

限制