Fetahokey's avatar

CSS Modules imports (REACT & larave-mix)

React 16.2.0 CSS Modules can not operate properly with Laravel Mix (4.1.4)

// webpack.mix.js
const mix = require('laravel-mix');

let rules = [
    {
        test: /\.ico$/,
        loaders: ['file-loader']
    }
];


mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(
        {
            module: {
                rules: rules
            }
        }
    );
mix.browserSync('localhost:8000');

my React component Progress.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import {
    Progress as BsProgress
} from 'reactstrap';

import classes from './../../../sass/Progress.scss';

const Progress = (props) => {
    const { children, slim, className, ...otherProps } = props;
    const progressClass = classNames(className, {
        [classes['slim']]: slim
    });
    

    return (
        <BsProgress className={ progressClass } { ...otherProps }>
            { !slim && children }
        </BsProgress>
    );
};

Progress.propTypes = {
    slim: PropTypes.bool,
    className: PropTypes.string,
    children: PropTypes.node
};

export { Progress };

0 likes
2 replies
Sinnbeck's avatar

And the problem? An error? They aren't loading? Something else?

1 like
Fetahokey's avatar

when I try to print classes like console.log(classes ) I get an empty object!

// Progress.css
.slim {
    height: 0.3rem;
}

Please or to participate in this conversation.