Does it work with TypeScript?

[deepslam]

Hello!

I'm trying to use your module, but it seems that it doesn't work with my setup. Here's my setup in webpack.mix.js

/* global require */
/* global process */
/* global module */

const mix = require('laravel-mix');
const productionSourceMaps = false;

if (process.env.NODE_ENV === 'development') if (module.hot) module.hot.accept();
require('laravel-mix-react-css-modules');
mix.reactCSSModules('[path]__[name]___[hash:base64]');

mix
  .ts('resources/ts/app/init.tsx', 'public/js/app.js')
  .sass('resources/sass/app.scss', 'public/css')
 .version()
 .sourceMaps(productionSourceMaps, 'inline-source-maps')
 .browserSync({ proxy: 'localhost:8000' });

As you can see, I use TypeScript. Hereafter I try to import my scss file from my tax component following way:

import Css from './Loader.scss';

And I get this error:

ERROR in /Users/dmitrijivanov/Projects/engfolk/resources/ts/app/uikit/Loader/Loader.tsx(2,17) TS2307: Cannot find module './Loader.scss'.

It's a pretty new project, therefore, I use laravel mix v.5 How can I fix it? Help me, please.

-- Regards, Dmitry

[deepslam]

I solved it guys. I just had to create the definition file with these lines:

declare module '*.scss';
declare module '*.css';

But I still do not have an autocompletion in IDE when I import style object.

[leinelissen]

Hi Dmitry!

Unfortunately, this use case is not supported natively by the tooling that supports CSS imports. I can find some loaders that offer this feature, but you'll have to implement it yourself. To get you started, this is the rough gist.

1. Install the loader
2. Override the css-loader and insert it

You will need to override Laravel Mix's webpack configuration using this method. You can find out roughly how that works here.

I'll close the issue for now, but let me know if you need any help with your problems.

Cheers! Lei

[deepslam]

Thank you so much!