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

Question

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

请教大神，这个哪里不对？万分感谢！

Answer 1

看下你的 webpack 的配置，通常 css 和 css module 的解析规则不同，css module 通常需要配置 css-loader modules: true，也有可能你要用 styles.module.css 引入