我正在將 css 檔案匯入打字稿模塊，但匯入決議為字串而不是物件。誰能告訴我為什么我沒有得到一個物件？
// preview.ts
import test from './src/assets/test.theme.css'
console.log('typeof test: ', typeof test);
console.log(test);
控制臺輸出：（截圖）
我知道，添加影像會更好，但是，我不允許這樣做，但是 :(
typeof test: string
-------------------------------------------------------------------------------------------------
// Imports
import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from "../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js";
import ___CSS_LOADER_API_IMPORT___ from "../../../node_modules/css-loader/dist/runtime/api.js";
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n background-color: red;\r\n}\r\n", "",{"version":3,"sources":["webpack://./.storybook/src/assets/test.css"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB","sourcesContent":["body {\r\n background-color: red;\r\n}\r\n"],"sourceRoot":""}]);
// Exports
export default ___CSS_LOADER_EXPORT___;
-------------------------------------------------------------------------------------------------
環境：
- 角 12
- 網路包 5
網路包配置：
{
rules: [
{
test: /\.(?:css)$/i,
rules: [ 'css-loader' ]
}
]
}
再生產
我能夠使用基本的 Angular12 應用程式重現此問題，如下所述：從“css-loader!./test.css”匯入測驗回傳字串
uj5u.com熱心網友回復：
我認為您的Webpack配置有誤。你有嵌套的rules屬性，而不是你應該有use：
{
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
}
https://webpack.js.org/loaders/css-loader/
uj5u.com熱心網友回復：
我很抱歉，但我必須恢復我的最后一句話。@Akxe 的評論沒有解決我的問題。現在我的 import 陳述句 ( import * as test from '...') 決議為一個物件，但它仍然不正確。
我已經建立了一個GIT Repo 來重現這個問題。該readme.md檔案解釋了重現和問題。
看起來 Webpack 沒有執行/評估加載器的回傳值。
順便提一句。這不僅僅是 css-loader 的情況。對于 raw-loader、sass-loader、style-loader 等，結果保持不變。
我的最終目標是將我的主題檔案延遲加載到故事書中。我嘗試遵循@etchteam/storybook-addon-css-variables-> theme的檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322362.html
標籤：javascript css 有角的 网络包 进口
上一篇：放大旋轉木馬的第一張幻燈片
下一篇：如何從App覆寫其他組件的css