自作UIライブラリを作ったときに、CSSのPathで苦労した話

概要

• タイトル通り

内容

だったりを参考に作っていたところ、何をやってもCSSのインポートエラーが発生し続けた。

実際のPathには存在するのに、感知できないようだった。

いろいろと調べたが、直すのはシンプルでインポートのパスが違うということだった。

答えは↑にありました。

ずっと、import '@tetex-public/ui/dist/style.css'としていたが、import '@tetex-public/ui/style.css'が正解だった。

直感的ではないので、嫌いです、、、
とはいえ/distがあるのも冗長であんまり好きではないので、見つけた設定場所を共有しておきます。

{
  "name": "@tetex-public/ui",
  "version": "0.0.26",
  "author": "koinunopochi",
  "license": "MIT",
  "description": "",
  "private": false,
  "type": "module",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js",
      "types": "./dist/index.d.ts"
    },
    "./dist/style.css": "./dist/style.css" <==== ここ `左が名前の解決で、右が実際の場所`
                                                 左を./style.cssにしていたのが今回の原因である。
  },

モノレポだからかなあとかいろいろと考えたのが馬鹿らしいくらい簡単でした、、、