Using SASS

[Flerex]

Is it possible to use SCSS modules with this plugin?

I'm trying to import a SCSS module like this:

import React, {Component} from 'react';
import styles from "../../sass/components/treeview.scss"

export default class TreeView extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className={styles.treeview}>blah blah</div>
        )
    }
}

And in treeview.scss some SCSS but if I do console.log(styles) I get an empty object. If I use a .css file instead it all works.

[leinelissen]

Hi @Flerex!

This should work out of the box. I'll make a distinction between the stuff that's happening in Laravel Mix and what's happening within this plugin.

By default, Laravel Mix will handle any import for SASS files. This means that anytime you do a import styles from 'blabla.scss', Mix will fetch that object and parse its CSS.

What this plugin does is, is tweak a few settings so that CSS Modules are activated. This also means that a JS object is returned from the import statement with all the classnames that have been generated.

The thing is, this happens equally for both CSS and SASS, as SASS is parsed to CSS eventually, so they use the same loader (css-loader specifically). Therefore, there shouldn't be any functional difference between .css imports and .sass or .scss imports.

I would suggest checking that your imports are valid. If that is the case, see if you can dump the final Webpack config using this. You can then check if the loaders for .s(a|c)ss are set correctly, and they use the modules: true option.

Cheers! Lei

[Flerex]

Thanks for your response @leinelissen, it was very instructive indeed. You see, I'm very new with all related to Webpack, Mix and React, so I apology in advance if this is my mistake.

As I'm not sure what I might be doing wrong I have created a public repository where, in a fresh Laravel installation, I tried to install this plugin. The repository is this one.

I tried to organize all my actions in the commits to see the steps I followed.

Am I missing something?

[leinelissen]

My first instinct is that it's something related to this line. This line is redundant, for the following reasons.

Webpack is a bundler for basically any asset. Traditionally, CSS is very separate from JS, but both are being parsed in the same system. With this React setup (and specifically CSS Modules), all the CSS becomes more intertwined with Javascript, since we're modifying class names so that they don't collide. This means we do SASS imports through Javascript instead of as a separate system. Requesting separate SASS imports through this line probably confuses Webpack, since it will find files it has already dealt with, and thus refrain from doing something when they are imported again.

Removing the line should fix, at least that's my theory. I probably don't have the time right now to validate that theory, but you could try it out and let me know. If not, I'll have another quick look in the coming week.

[Flerex]

I'm afraid it didn't work. Nothing seems to have changed.

[leinelissen]

Then I'll have to come up with another hypothesis 😉. I'll try to get back to you somewhere in the coming week.

[Flerex]

Okay, thank you! :-)

[leinelissen]

You got me intrigued, and with some investigation I've managed to find what the problem is. In your repository the Laravel Mix version is set to 4.0, whereas this plugin was designed for version 2.0. This is the root cause of the problem.

In Mix 4, SASS has become an extraneous dependency. This causes problems, because we modify the Webpack config, but apparently we can only modify the base web pack config, and not the SASS specific config. Since SASS is part of the base config in both version 2 and 3, it works over there.

I'll check if I can come up with a nice solution that plays nicely with any version, but until then, you'll have to downgrade to Laravel Mix 2 (or possibly version 3). The resulting code should be nearly the same, but it'll compile a bit slower.

[leinelissen]

I've also confirmed the example in your repo works if you downgrade to laravel-mix 2 or 3. You can easily do this by pasting this in the CLI:

npm install laravel-mix@3

[leinelissen]

I've opened a ticket with the laravel-mix guys as well: https://github.com/JeffreyWay/laravel-mix/issues/2015.

[Flerex]

This is great! Thanks for your time. It works now.

Thank you for your plugin! I love it.

[leinelissen]

Thanks for your report!

[MusicCorner]

Hello there! I have an issue - can not use scss files with laravel-mix-react-css-modules. I'm getting this error when follow instructions below: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema

[leinelissen]

@MusicCorner could you share your Laravel Mix version?

[MusicCorner]

"laravel-mix": "^5.0.1", "laravel-mix-react-css-modules": "^2.0.0",

[leinelissen]

Okay right, that should be doing the trick, but apparently there is something weird going on there. Could you also post your results for npm ls css-loader?

[MusicCorner]

[leinelissen]

Ah, right you are using a different loader from laravel-mix. You should upgrade to the alpha version of this package to match the new syntax:

npm install laravel-mix-react-css-modules@next

Out of curiosity: is this a change you made yourself? And if so, is there a particular reason for doing so?

[MusicCorner]

Yes, it's a change i made myself - i tried to start frontend not using laravel-mix. So now i tried to remove it and error was gone (but i got another one, which is not connected to laravel-mix-react-css-module). Anyway, thank you!

[leinelissen]

No worries, good luck!