前言
我对Webpack、Babel、Loaders及其交互方式几乎一无所知
问题描述
我开发了一个Angular组件库，最近移植到了Angular 12。我目前正在为文档设置故事书。我想使用Storybook插件"@etchteam/storybook插件css变量主题"；在不同的CSS样式表之间切换。
通过这个插件的文档，我发现了webpackloader语法，特别是对于延迟加载的样式表，即
import test from "!!style-loader?injectType=lazyStyleTag!css-loader!./test.css"
但是，在浏览器控制台中，我得到了Unhandled Promise rejection: file.use is not a function。
屏幕截图：浏览器控制台
我发现，我的主要问题与故事书无关，因为即使是一个简单的css加载程序导入url也会返回一个纯字符串而不是对象。
我花了好几天时间分析这个问题，但我真的束手无策。
环境
- NodeJS 14.17.6
- 打字稿4.3.x
- 角度12.2.10
- Webpack 5.50.0
- @巴氏合金/芯7.14.8
- css加载程序6.4.0
- Postpass加载程序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"
]
}
}
Repro
不幸的是，我无法用例如CodeSandbox设置最小限度的重新编程。但我能够用一个全新的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被打印为对象(见屏幕截图)
相反，我看到了什么
css-loader的转换结果作为string返回(见屏幕截图)
限制
我不想提供自定义的webpack配置。对于实验来说，这很好，但对于我的库，我希望尽可能接近Angular标准。
@Akxe解决了我的问题：将css文件导入es6返回字符串而不是对象
使用import * as test from '...'解决了我的问题。