TypeScript ，import引入css样式，可以用，但是值全是undefined

来源：2-13 泛型（Generics）第一部分

慕尼黑8466541

2020-11-09

popup.css

.yp-popup {
  position: fixed;
  z-index: 999;
  border: 1px solid #d9d9d9;
}

popup.css.d.ts

declare const styles: {
  readonly 'yp-popup': string
}

export default styles

popup.ts

import styles from './popup.css'
function popup() {
  return styles['yp-popup']
}
export default popup

console.log(popup) 结果如下:

popup() {
  return _popup_css__WEBPACK_IMPORTED_MODULE_0___default.a['yp-popup'];
}

console.log(popup()) 结果为undefined
请教老师，这是哪里问题？

写回答

1回答

张轩

2020-11-09

已采纳

同学你好我看你是使用了 css modules 你虽然配置了它的定义但是你使用的脚手架工具是否实现了支持 css modules 的 import？假如不支持那肯定是返回 undefined 了。如果你使用的 vue-cli，它是支持 css modules 的，但是命名要改一下。可以看下文档：https://cli.vuejs.org/zh/guide/css.html#css-modules

慕尼黑8466541

搞定了，谢谢老师

2020-11-09

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

The requested module XX does not provide an export named 'ColumnProps'

回答 2

老师，useMousePosition可以运行但是会报一个warning