在此應用程式中初始化了多個'樣式組件”實例
P粉590929392
P粉590929392 2024-03-31 12:17:14
0
1
355

我已經嘗試了所有的解決方案,現在來問這個問題,我正在建立一個 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"
    }
}

P粉590929392
P粉590929392

全部回覆(1)
P粉549986089

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

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板