javascript 如何发布一个带有css模块的react-component,它可以被使用ES模块的项目和使用CommonJs的css模块使用

ogq8wdun  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(142)

对于某些框架(例如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?

pw9qyyiw

pw9qyyiw1#

我发现的一个变通方法是生成css模块散列类并提取样式表,然后导入带有散列类的样式表而不是css模块样式表,每个能够导入css模块的捆绑器也应该能够处理提取的css文件。
为此,我使用babel-plugin-css-modules-transform,配置如下:

…
  "plugins": [
    [
      "css-modules-transform",
      {
        "extractCss": {
          "dir": "./lib/",
          "relativeRoot": "./src/",
          "filename": "[path]/[name].compiled.css"
        },
        "keepImport": true,
        "importPathFormatter": "./importPathFormatter"
      }
    ]
  ]
  …

keepImport选项将保留导入,但将其从import * as styles from 'styles.module.css'转换为import 'styles.module.css'。我将此选项与未记录的选项importPathFormatter结合使用来导入转换后的css。CSS预处理(例如postCSS)由消费应用程序完成。
./importPathFormatter.js的含量:

module.exports = path => path.replace(/\.css$/, '.compiled.css');

从长远来看,我希望将我的项目迁移到香草精,并使用rollup/vite进行捆绑,但目前这还不错。

相关问题