TomKeyte
3 years ago
929
2
Mix

Help using css modules with Laravel 5.4 mix, 'the dependency was not found issue'

Posted 3 years ago by TomKeyte

I'm trying to configure a laravel/react project to use css module, similar to what is used here: https://github.com/3amprogrammer/react-holy-grail-layout

My webpack.mix looks like this:

mix.react('resources/assets/js/app.jsx', 'public/js')
    .react('resources/assets/js/index.jsx', 'public/js')
   //.sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    loaders: [
                      'style',
                      'css?modules&importLoaders=1&localIdentName=nlc_[hash:base64:5]',
                      'sass'
                    ]
                }
            ]
        },
        resolve: {
            extensions: ['.scss'],
        },
   })
   .browserSync({
       proxy: 'http://127.0.0.1:8000',
        files: ['public/**/*', 'resources/**/*']
    });

and here is an example component:

import React, {Component} from 'react'

import CSSModules from 'react-css-modules'
import styles from './styles/example.scss'

class ExampleComponent extends Component {
    render() {
        return (
            <div styleName="example-class">
                ...
            </div>
        )
    }
}

export default CSSModules(ExampleComponent, styles)

and example.scss

.example-class {
    padding: 1em;
    border-radius: 5px;
    background: turquoise;
}

on running mix, I get the error:

This dependency was not found:

  • /styles/example.scss in ./resources/assets/js/.../example.js (The path is correct)

I have installed "css-loader", "node-sass", "resolve-url-loader", "sass-loader", "style-loader"

Please sign in or create an account to participate in this conversation.