Geek Answers Handbook

Gulp + webpack + css-loader + typescript: "cannot find module"

I want to use css-loader with :local() in my dev-setup.

Error: import './sidebar.css';

it compiles without problems, but then I don’t know how to access the local class names inside my .tsx file.

Error: import classNames from './sidebar.css';

Here I get: error TS2307: Cannot find module './sidebar.css'

Explanation of my installation:

  • .tsx files compiled into commonjs modules via gulp - typescript (ES5)
  • Commonjs modules compiled and passed to JS via webpack

sidebar.tsx (imported into app.tsx , if that matters)

import classNames from './sidebar.css';

sidebar.css

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

gulpfile.js

Gulp task of compiling .tsx files .tsx modules (performed primarily before the webpack task):

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

My gulp -webpack task:

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

What am I doing wrong?

Edit: I just found this: https://github.com/Microsoft/TypeScript/issues/2709 but I do not understand this. Does this mean that I have to declare my CSS as a module?

+6
source share
2 answers

typescript cannot load or understand css files, but it will work with webpack. To tell TypeScript that there are files with an end other than * .ts, you must declare a wildcard module for the corresponding file type. Just put it in the * .d.ts file that you include in the project.

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

To load resources other than ts, simply declare a require function and use the imported resources (like any ).

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

+2
source

More articles:


All Articles