TypeScript通过.d.ts声明文件使用import局部导入css

TypeScript中根据文件引入方式不同，有不同的解析方式，比如局部import 导入css文件时，ts会无法识别解析。在这种情况下，要么使用require方法，要么全局引用。或者直接使用ts的声明文件（.d.ts）

对于TypeScript的声明文件，可以理解为，当ts遇到无法判断的类型是，需要在引入前加入一个声明文件来帮助ts判断。声明文件以.d.ts为结尾。

比如在以ts+webapck为技术栈开发组件的框架下，如何在项目中引入css。

• 按范围分为全局和局部引入

• 在局部引入中按ts处理方式分为直接引入和使用声明文件翻译后引入

以在项目中引入popup.css为例

.popup {
    font-size: 12px;
}

1. 全局引入：

   • import导入

     `import './popup.css'

   • 使用

     class = "popup"

2. 局部引入：

   • 直接通过require引入

     • require引入

       let styles = require('./popup.css')
       

     • 使用

       class = "${styles.default.popup}"
       

   • 通过ts声明文件.d.ts(创建同名的css文件并在文件名后加上.d.ts后缀)

     • 创建popup的声明文件

       declare const styles : {
        readonly "popup" : string
       }
       export default styles
       

     • 局部导入

       import styles from "./popup.css"

     • 使用

       class = "${styles.popup}"