TypeScript CSS/SCSSインポートエラー解決

TypeScriptでCSS/SCSSモジュールをインポートできない問題の日本語解説

TypeScriptでCSSやSCSSのモジュールをインポートしようとすると、「Cannot Find Module」というエラーが発生することがあります。これは、TypeScriptがモジュールを解決できないことを示しています。

原因と解決方法

1. モジュール解決パス
   

   • TypeScriptはデフォルトでは特定のパスでモジュールを検索します。このパスにCSS/SCSSファイルが存在しない場合、エラーが発生します。
   • 解決方法
     
     • tsconfig.jsonファイルのcompilerOptions.baseUrlプロパティを設定して、モジュールの検索パスを指定します。
     • compilerOptions.pathsプロパティを使用して、モジュールのエイリアスを定義することもできます。

2. モジュールフォーマット
   

   • CSS/SCSSは通常、JavaScriptモジュールではありません。そのため、TypeScriptは直接インポートできません。
   • 解決方法
     

3. インポートパス
   

   • インポートパスのスペルミスや誤ったパスが原因でエラーが発生することがあります。
   • 解決方法
     
     • インポートパスを正確に確認し、スペルミスがないことを確認してください。
     • 相対パスまたは絶対パスを使用して、モジュールを正しく指定します。

例

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@styles": ["src/styles"]
    }
  }
}

index.tsx

import './styles/main.scss';

// ...

main.scss

// ...

この例では、tsconfig.jsonでbaseUrlとpathsを設定し、index.tsxからmain.scssをインポートしています。sass-loaderやcss-loaderなどのツールを使用して、main.scssをJavaScriptモジュールに変換する必要があります。

解決方法

tsconfig.jsonの設定

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@styles": ["src/styles"]
    }
  }
}

• pathsプロパティ: モジュールのエイリアスを定義します。
• baseUrlプロパティ: モジュールの検索パスを設定します。

インポートパス

import './styles/main.scss';

• インポートするモジュールのパスを指定します。

CSS/SCSSモジュールの変換

• CSS/SCSSファイルをJavaScriptモジュールに変換するツールを使用します。
  • Webpack
    

    // webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
          }
        ]
      }
    };
    

  • Rollup
    

    // rollup.config.js
    import sass from 'rollup-plugin-sass';
    
    export default {
      plugins: [
        sass()
      ]
    };
    

統合例

// index.tsx
import './styles/main.scss';

// ...

// styles/main.scss
// ...

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@styles": ["src/styles"]
    }
  }
}

// webpack.config.js
module.exports = {
  // ...
};

CSSモジュール

• TypeScriptで直接インポートできます。
• CSSファイルをJavaScriptモジュールに変換し、クラス名や変数をスコープ化します。

例

import styles from './styles.module.css';

const element = document.createElement('div');
element.className = styles.container;

// styles.module.css
.container {
  // ...
}

CSS-in-JSライブラリ

• TypeScriptとの統合が容易です。
• JavaScriptコード内でCSSを定義し、スタイルを適用します。

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

ローカルファイル参照

• シンプルですが、スタイルの管理が難しくなることがあります。
• CSS/SCSSファイルを直接参照し、インラインスタイルとして適用します。

<link rel="stylesheet" href="./styles/main.css">

CSSプリプロセッサのプラグイン

• CSSプリプロセッサ（Sass、Lessなど）のWebpackプラグインを使用して、CSS/SCSSファイルをJavaScriptモジュールに変換します。

// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new SassPlugin()
  ]
};

TypeScriptの型定義ファイル

• CSS/SCSSモジュールの型定義ファイルを作成し、TypeScriptがモジュールを正しく認識できるようにします。

// styles.d.ts
declare module './styles.css' {
  const styles: {
    container: string;
    // ...
  };
  export default styles;
}