gulp + webpack + css-loader + typescript: "kan ikke finne modul"

Jeg vil bruke css-loader med :local()-funksjonen i mitt utviklingsoppsett.

Ingen feil: import './sidebar.css';

Det kompilerer uten problemer, men så vet jeg ikke hvordan jeg får tilgang til de lokale klassenavnene inne i min .tsx-fil.

Feil: import classNames fra './sidebar.css';

Her får jeg: error TS2307: Kan ikke finne modulen './sidebar.css'

Forklarer oppsettet mitt:

  1. .tsx-filer kompileres til commonjs-moduler via gulp-typescript (ES5)
  2. commonjs-moduler blir kompilert og minifisert til JS via webpack

sidebar.tsx (blir importert i app.tsx hvis det har betydning)

import classNames from './sidebar.css';

sidebar.css

.sl-sidebar {
  background-color: yellow;
}

gulpfile.js

Gulp-oppgave som kompilerer .tsx-filer til commonJS-moduler (kjører selvfølgelig før webpack-oppgaven):

gulp.task('gui-tsx', function () {
    return gulp.src(config.guiTsxPath + '**/*.tsx')
        .pipe(ts({
            jsx: 'react',
            outDir: config.guiCompiledPath,
            module: 'commonjs',
            target: 'ES5'
        }))
        .pipe(gulp.dest(config.guiCompiledPath));
});

Min gulp-webpack oppgave:

gulp.task('gui-webpack', function () {
    webpack({
        bail: false,
        debug: true,
        entry: './' + config.guiCompiledPath + 'app.js',
        output: {
            filename: "gui.js",
            path: './' + config.pubPath + 'js'
        },
        devtool: "#inline-source-map",
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                },
                output: {
                    comments: false,
                    semicolons: true
                },
                sourceMap: true
            })
        ],
        module: {
            loaders: [ {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'
            }]
        }

    }, function (err, stats) {
        if (stats.compilation.errors.length > 0) {
            console.log(stats.compilation.errors[0].message);
        }
    });
});

Hva gjør jeg galt?

Rediger: Jeg fant nettopp dette: https://github.com/Microsoft/TypeScript/issues/2709, men jeg forstår det ikke helt. Betyr det at jeg må erklære CSS-en min som en modul?

Svar #1

TypeScript kan ikke laste eller forstå CSS-filer, men det vil fungere med Webpack. For å fortelle TypeScript at det finnes filer med en annen filendelse enn *.ts, må du deklarere en wildcard-modul for den aktuelle filtypen. Sett det bare i en *.d.ts-fil som du inkluderer i prosjektet.

// declaration.d.ts
declare module '*.css' {
    const content: any;
    export default content;
}

Svar #2

For å laste inn ikke-ts ressurser, deklarer bare require-funksjonen og bruk de importerte ressursene (som any).

Dokumentasjon: https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

Relaterte artikler