css使用

慕课网

局部css

// webpack.config.json

rules:[
  { // 这条是除了src/components下的css文件，其他都是全局的
    test: /\.css$/,
    use:["style-loader", "css-loader"],
    exclude:[ // 排除
      path.resolve(__dirname, 'src/components')
    ]
  },
  { // 这条是src/components下的css文件都是局部的
    test: /\.css$/,
    use:["style-loader", {
      loader:"css-loader",
      options:{
        modules:true
      }
    }],
    include:[ // 包括
      path.resolve(__dirname, 'src/components')
    ]
  },
]

ts文件怎样引入css

1. 直接全局引入是可以的，ts不会报错

import './index.css'

2. 局部引入, css-loader开启了modules:true

使用webpack的node的require方式引入，是可以的，不会走ts这一套：

const styles = require('./index.css')

<div class="styles.pupop"></div>

如果使用es6语法, ts会报错，会提示找不到css文件的定义文件, ts不认识css文件。

import styles from './index.css'

<div class="styles.pupop"></div>

只能新建对应css文件的d.ts文件：index.css.d.ts

// index.css
.popup{
  background:red;
}
.popupTitle{
  ...
}

// index.css.d.ts
declare const styles = {
  readonly "popup":string;
  readonly "popupTitle":string;
}

export default styles

Css-loader的modules

还可以是个对象：

{
  loader:'css-loader',
  options:{
    modules:{
      localIdentName: '[path][name]__[local]--[hash:base64:5]'
    }
  }
}