Use Sass-Modules with Laravel & React

Dear Community,

I wasted half the day today somehow getting sass-modules to work inside laravel with the react scaffolding.

Currently my package.json looks like this:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    },
    "dependencies": {
        "@coreui/chartjs": "^2.0.0",
        "@coreui/coreui": "^3.4.0",
        "@coreui/icons": "^2.0.0-beta.3",
        "@coreui/utils": "^1.3.1",
        "@popperjs/core": "^2.5.4",
        "chart.js": "^2.9.4",
        "perfect-scrollbar": "1.5.0",
        "react-router-dom": "^5.2.0"
    }
}

I have tried X number of different solutions, but none have worked yet.

I'm sure the solution is quite simple, but I just can't figure it out.

I want to be able to use the following schema within my React component:

import React from 'react'
import PropTypes from 'prop-types'
import { cContainer } from './styles.module.scss'

const Container = ({children}) => (
  <div className={cContainer}>{childre}</div>
)

Container.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Container

mathishuettl

4 years ago

Level 1

Update: I'm getting closer to the solution :) With that code css-modules are working, but what changes are necessary that it works with .scss files too?

mix.react('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        // Add below source for active CSS Modules
        .webpackConfig({
          module: {
            rules: [
              {
                test: /\.css$/,
                loaders: [
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true,
                      localIdentName: '[local]_[hash:base64:8]',
                    },
                  },
                ],
              },
            ],
          },
        });

mathishuettl

4 years ago

Level 1

Second Update:

Everything compiles fine, it's just not importing the sass file - so my div don't get any class... I neither get a console error or terminal error while npm run watch...

// import * as styles from './styles.module.scss' => also doesn't work
import {container} from './styles.module.scss'

const Container = ({children}) => {
  return (
    <div className={container}>
      {children}
    </div>
  )
}

mix.react('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        // Add below source for active CSS Modules
        .webpackConfig({
          module: {
            rules: [
              {
                test: /\.scss$/,
                loaders: [
                  {
                    loader: 'sass-loader',
                    options: {
                      modules: true,
                      localIdentName: '[local]_[hash:base64:8]',
                    },
                  },
                ],
              },
            ],
          },
        });

Please or to participate in this conversation.