gulp + webpack + css-loader + maszynopis: "nie można znaleźć modułu"

Question

Chcę użyć css-loader z funkcją :local() w moim dev-setup.

Brak błędu:import './sidebar.css';

kompiluje bez problemu, ale nie wiem, jak uzyskać dostęp do lokalnych classnames wewnątrz mojego pliku .tsx.

Błąd:import classNames from './sidebar.css';

Tutaj pojawia się: error TS2307: Cannot find module './sidebar.css'

Wyjaśniając mój setup:

1. .tsx pliki są kompilowane do commonjs modułów poprzez haustem-maszynopisu (ES5)
2. commonjs moduły są kompilowane & zminimalizowane do JS za pośrednictwem pakietu sieciowego

sidebar.tsx (importowane w app.tsx jeśli to ma znaczenie)

import classNames from './sidebar.css';

sidebar.css

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

gulpfile.js

Gulp zadanie kompilacji .tsx pliki commonJS moduły (biegnie przed WebPACK-zadania oczywiście):

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)); 
}); 

Moim zadaniem łyk-WebPack:

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); 
     } 
    }); 
}); 

Co robię źle?

Edit: Właśnie znalazłem to: https://github.com/Microsoft/TypeScript/issues/2709 ale ja nie bardzo rozumiem go. Czy to znaczy, że muszę zadeklarować mój CSS jako moduł?

Answer 1

Aby załadować zasoby inne niż ts, po prostu zadeklaruj funkcję require i użyj zaimportowanych zasobów (jako any).

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

Answer 2

maszynopis nie można załadować lub zrozumieć pliki CSS, ale to będzie działać z WebPack. Aby powiedzieć TypeScript, że istnieją pliki z zakończeniem innym niż * .ts, musisz zadeklarować moduł wieloznaczny dla odpowiedniego typu pliku. Po prostu umieść go w pliku * .d.ts, który umieścisz w projekcie.

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