CSS / SCSSモジュールをインポートできません。TypeScriptは「モジュールが見つかりません」と言います

88

CSSモジュールからテーマをインポートしようとしていますが、TypeScriptで「モジュールが見つかりません」というエラーが表示され、テーマが実行時に適用されません。Webpackの設定に問題があると思いますが、どこに問題があるのか​​わかりません。

私は次のツールを使用しています：

"typescript": "^2.0.3"
"webpack": "2.1.0-beta.25"
"webpack-dev-server": "^2.1.0-beta.9"
"react": "^15.4.0-rc.4"
"react-toolbox": "^1.2.3"
"node-sass": "^3.10.1"
"style-loader": "^0.13.1"
"css-loader": "^0.25.0"
"sass-loader": "^4.0.2"
"sass-lint": "^1.9.1"
"sasslint-webpack-plugin": "^1.0.4"

これが私の webpack.config.js

var path = require('path');
var webpack = require('webpack');
var sassLintPlugin = require('sasslint-webpack-plugin');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index.tsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:8080/',
    filename: 'dist/bundle.js',
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'source-map-loader',
      exclude: /node_modules/,
      enforce: 'pre',
    }, {
      test: /\.tsx?$/,
      loader: 'tslint-loader',
      exclude: /node_modules/,
      enforce: 'pre',
    }, {
      test: /\.tsx?$/,
      loaders: [
        'react-hot-loader/webpack',
        'awesome-typescript-loader',
      ],
      exclude: /node_modules/,
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }, {
      test: /\.css$/,
      loaders: ['style', 'css']
    }],
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  plugins: [
    new sassLintPlugin({
      glob: 'src/**/*.s?(a|c)ss',
      ignoreFiles: ['src/normalize.scss'],
      failOnWarning: false, // Do it.
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: './'
  },
};

App.tsxインポートしようとしている場所：

import * as React from 'react';

import { AppBar } from 'react-toolbox';
import appBarTheme from 'react-toolbox/components/app_bar/theme.scss'
// local ./theme.scss stylesheets aren't found either 

interface IAppStateProps {
  // No props yet
}

interface IAppDispatchProps {
  // No state yet
}

class App extends React.Component<IAppStateProps & IAppDispatchProps, any> {

  constructor(props: IAppStateProps & IAppDispatchProps) {
    super(props);
  }

  public render() {
    return (

        <div className='wrapper'>
          <AppBar title='My App Bar' theme={appBarTheme}>
          </AppBar>
        </div>

    );
  }
}

export default App;

タイプセーフなスタイルシートモジュールのインポートを有効にするには、他に何が必要ですか？

typescript  import  sass  webpack  css-modules 
— zakdances
ソース

回答:

125

TypeScriptは、.tsまたは以外のファイルがあることを認識しない.tsxため、インポートに不明なファイルサフィックスがある場合はエラーをスローします。

他の種類のファイルをインポートできるwebpack構成がある場合は、これらのファイルが存在することをTypeScriptコンパイラに通知する必要があります。これを行うには、適切な名前でモジュールを宣言する宣言ファイルを追加します。

宣言するモジュールの内容は、ファイルタイプに使用されるwebpackローダーによって異なります。sass-loader → css-loader → style-loader*.scssを介してファイルをパイプするWebpack構成では、インポートされたモジュールにコンテンツはなく、正しいモジュール宣言は次のようになります。

// declaration.d.ts
declare module '*.scss';

ローダーがcss-modules用に構成されている場合は、次のように宣言を拡張するだけです。

// declaration.d.ts
declare module '*.scss' {
    const content: Record<string, string>;
    export default content;
}
— カレ
ソース
2
ねえ、これは私にはうまくいきませんでした、最近何かが変更されました。 stackoverflow.com/questions/56563243/…–
— ケイ
50

これが私のために働く完全な構成です（誰かが同じ問題に遭遇した場合に備えて、私はこれに1時間の苦痛な試行とエラーを費やしました）：

TypeScript + WebPack + Sass

webpack.config.js

module.exports = {
  //mode: "production", 
    mode: "development", devtool: "inline-source-map",

    entry: [ "./src/app.tsx"/*main*/ ], 
    output: {
        filename: "./bundle.js"  // in /dist
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
    },
    module: {
        rules: [

            { test: /\.tsx?$/, loader: "ts-loader" }, 

            { test: /\.scss$/, use: [ 
                { loader: "style-loader" },  // to inject the result into the DOM as a style block
                { loader: "css-modules-typescript-loader"},  // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
                { loader: "css-loader", options: { modules: true } },  // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
                { loader: "sass-loader" },  // to convert SASS to CSS
                // NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
            ] }, 

        ]
    }
};

またdeclarations.d.ts、プロジェクトにを入れてください：

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). 
declare module '*.scss';

そして、あなたはあなたpackage.jsonのdev-dependenciesでこれらすべてを必要とするでしょう：

  "devDependencies": {
    "@types/node-sass": "^4.11.0",
    "node-sass": "^4.12.0",
    "css-loader": "^1.0.0",
    "css-modules-typescript-loader": "^2.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

次に、定義したCSSクラスを含むmystyle.d.ts横にmystyle.scss、Typescriptモジュールとしてインポートして次のように使用できるようにする必要があります。

import * as styles from './mystyles.scss'; 

const foo = <div className={styles.myClass}>FOO</div>;

CSSは自動的に読み込まれ（style要素としてDOMに挿入され）、ページ内のスタイルを分離するために、.scssのCSSクラスの代わりに不可解な識別子が含まれます（を使用しない場合:global(.a-global-class) { ... }）。

インポートされたmystyles.d.tsは古いバージョンであり、コンパイル中に生成されたばかりの新しいバージョンではないため、CSSクラスを追加、削除、または名前変更するたびに、最初のコンパイルが失敗することに注意してください。もう一度コンパイルしてください。

楽しい。

— frevd
ソース
「注：新しく生成された.d.ts typescriptモジュールは後でのみ取得されるため、CSSクラスを追加/削除/名前変更した後の最初のビルドは失敗します」-その部分を解決するにはどうすればよいですか？
— JonLauridsen20年
3
@JonLauridsenこれは、webpack.config.jsのルールの配列の下部（最後）にts-loaderを設定することで解決できます。したがって、ts-loaderは、コンパイルのたびに正しい* .scss.d.tsファイルを取得します。
— YanPak20年
1
@YanPakありがとう、ts-loaderをスタイルローダーの下に移動するとともにglobal.d.ts、srcディレクトリにaを追加すると、修正されました。
— ルクス
5

tsconfig.jsonパス設定を使用している場合の注意事項

これらのソリューションをtsconfigパスと組み合わせて使用​​してインポートを短縮する場合は、追加の構成が必要になることに注意してください。

次のようなパスtsconfigを使用する場合：

{
  "compilerOptions": {
    "paths": {
      "style/*": [ "src/style/*" ],
    }
  }
}

だからあなたはすることができます：

import { header } from 'style/ui.scss';

次に、次のようにWebpackにモジュール解決構成を追加する必要があります。

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      style: path.resolve(__dirname, 'src', 'style')
    }
  }
}

設定に従ってパスが設定されていることを確認してください。

これにより、webpackは新しいインポートパスが実際にはモジュールであると見なし、デフォルトでnode_modulesディレクトリになるため、どこを見ればよいかがわかります。この構成では、どこを探して見つけるかがわかり、ビルドが機能します。

— dbrody
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.