如何在create-react-app项目中从'./local.css'语法启用`导入样式？

Question

我用npx create-react-app myapp --typescript创建了一个骨架项目。

我的CSS导入样式为import styles from './App.css，这样我就可以做类似的事情

<div className={styles.container}>Hello</div>

但是，如果我尝试使用这种样式，则会出现错误

Type error: Cannot find module './App.css'.  TS2307

    2 | import logo from './logo.svg';
    3 |
  > 4 | import styles from './App.css';

如何配置我的react-app以接受这种编码样式？

create-react-app的版本是2.1.3

Answer 1

由于它不是js模块，因此无法以您的方式导入样式表。您可以这样做：

import './App.css'

仅当您将样式创建为js对象并且仅应用于样式属性而不是className时，您才可以做到这一点。示例：

在 Style.js 上而不是CSS

const styles =  {
    container: {
        background: red,
        fontSize: '15px'
    }
}

export default styles;

在 App.js

import styles from './styles'

以及您的render（）

<div style={styles.container}>Your Content</div>

请注意其样式不是类

如果您使用typed-css-modules，则必须与tcm --watch一起运行，或者单独运行tcm。完成后，除非找不到样式，否则tslint不会给您任何错误。

Answer 2

1. 将“ App.css”更改为“ App.module.css”

2. 导入 import styles from './App.module.css'

3. 使用这样的类

<div className={styles.app}>Hello World!</div>

参考Link