对于某些框架(例如Gatsby〉= V3),导入CSS模块的默认方式是ES模块,如下所示:
import { class1, class2 } from 'styles.modules.css'
// or
import * as styles from 'styles.modules.css'
https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules
其他项目(如Create React App)仍使用默认导出,如下所示:
import styles from 'styles.modules.css'
我怎样才能发布一个react-component(它在内部使用css模块),这样它就可以被导入并在两个场景中使用,而不用提取css?
1条答案
按热度按时间pw9qyyiw1#
我发现的一个变通方法是生成css模块散列类并提取样式表,然后导入带有散列类的样式表而不是css模块样式表,每个能够导入css模块的捆绑器也应该能够处理提取的css文件。
为此,我使用babel-plugin-css-modules-transform,配置如下:
keepImport
选项将保留导入,但将其从import * as styles from 'styles.module.css'
转换为import 'styles.module.css'
。我将此选项与未记录的选项importPathFormatter
结合使用来导入转换后的css。CSS预处理(例如postCSS)由消费应用程序完成。./importPathFormatter.js
的含量:从长远来看,我希望将我的项目迁移到香草精,并使用rollup/vite进行捆绑,但目前这还不错。