Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

优化css引入(使用css-module) #1

Open
eatureide opened this issue Mar 30, 2022 · 0 comments
Open

优化css引入(使用css-module) #1

eatureide opened this issue Mar 30, 2022 · 0 comments

Comments

@eatureide
Copy link

eatureide commented Mar 30, 2022

webpack.config.js处的css-loader配置更改为

{
 test: /\.(css)$/,
 use: ["style-loader", {
       loader: 'css-loader',
       options: {
          modules: true,
       }
  }],
}

src根目录下(注意不是examples的src根目录)新增global.d.ts文件,内容如下,这样tsx引入就不会报错了

declare module '*.css'

src/index.tsx中css引入方式更改为

import styles from './styles.css';

这个时候输出styles就会正确编译为module了
image
由于更改了css的使用方式,tsx中使用了className的地方需要做调整

// 大概65行处:
current.className = current.className + ` ${styles['suspend-button-ts-animate']}`;

// 大概186行处:
className={`${styles['suspend-button-ts']}`}

// 大概171行处
current.className = current.className + ` ${styles['suspend-button-ts-animate']}`;

脚手架可以使用vite、create-react-app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant