在此應用程式中初始化了多個'樣式組件”實例

Question

我已經嘗試了所有的解決方案，現在來問這個問題，我正在建立一個 ui 元件庫。

我有兩個包，一個用於庫，一個用於演示，該演示使用符號鏈接使用庫，文件：../ui 在其package.json 中，我首先構建庫，然後在演示中使用它包

程式碼可在 https://github.com/Qawaz/qal-ui/ 取得

我嘗試使用 npm dedupe 刪除重複依賴項，但沒有成功。使用指令 npm ls styled-components 我得到

+-- @paljs/ui@1.1.1 -> .\..\ui
| `-- styled-components@6.0.3
+-- babel-plugin-styled-components@2.1.4
| `-- styled-components@6.0.3 deduped
+-- gatsby-plugin-styled-components@6.11.0
| `-- styled-components@6.0.3 deduped
`-- styled-components@6.0.3

以前，我啟用了父模組和工作區，並且兩個套件使用npm 共享依賴項，但我刪除了它，我遷移到完全獨立的模組，但一個模組使用符號連結對另一個模組進行依賴。

• styled-components 是元件庫中的對等依賴項，不是直接的
• 兩個項目的樣式元件版本保持一致
• 正在使用 gatsby，正在使用用於樣式元件的 babel 外掛程式和用於樣式元件的 gatsby 外掛程式

將其添加到我的 gatsby-node.js 後（某些答案中建議這樣做）

const path = require("path")
exports.onCreateWebpackConfig = ({stage, actions}) => {
    actions.setWebpackConfig({
        resolve: {
            alias: {
                "styled-components": path.resolve("node_modules", "styled-components"),
            }
        }
    })
}

我在控制台中收到此錯誤，此錯誤是誤報，如果您更改 gatsby-config 中的某些內容並隨機出現，它就會消失

export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)

一些答案也表明了這一點，它導致我的建置中斷

optimization: {
    runtimeChunk: {
        name: "vendor"
    }
}

Answer 1

我發現，如果您使用的函式庫中的元件也因為多個實例而使用 styled-components，那麼 styled-components 就會開始抱怨。

所以我切換到emotion，我將emotion保留在對等依賴關係中，並且體驗要好得多，因為emotion包含styled的大部分功能-components 和API 非常相似。

還有goober 提供了一個設定方法，可以由函式庫使用者goober 呼叫> 是一個很棒的選擇，但是當我嘗試使用goober 時，它不包含useTheme 鉤子，而且goober 非常注重保持套件更小，同時提供css 功能js。