カスタムコンポーネント内 限定の css を読めるようにする

なやみ

src/css/custom.css で定義したスタイルが、カスタムコンポーネント (tsx) 内では読まれていないようだ。

解決策

• docusaurus.config.ts で、 require.resolve(..) する
• そうすると、tsx 内では 明示的に import する必要がない

docusaurus.config.ts

const config: Config = {
  ...
  presets: [
    [
      'classic',
      {
        ...
        theme: {
          // customCss: './src/css/custom.css', // 変更前
          customCss: require.resolve('./src/css/custom.css'), // 変更後
        },

---

呼び出し例

tsx

import React from 'react';

const SampleTag: React.FC = () => {
  return <span className="sample-highlight">...</span>;
};

export default SampleTag;

src/css/custom.css

.sample-highlight {
	color: red;
	font-weight: bold;
	border: solid 1px;
	padding: 5px;
}