laravel-mix icon indicating copy to clipboard operation
laravel-mix copied to clipboard

Module not found for .scss / .css with laravel mix

Open sefirosweb opened this issue 3 years ago • 0 comments

  • Laravel Mix Version: "^6.0.49",
  • Node Version 18.7
  • NPM Version 8.15
  • OS: Windows (with sail ubuntu docker)

Description:

I have a project with laravel / laravel-mix based on react & typescript

Whe i try to create a css module for one component same has the example below is not working: https://github.com/laravel-mix/laravel-mix/blob/3ab87c13822cb1432bb78b7558f9f09452ec5434/test/fixtures/integration/src/js/ScssModule.jsx#L1

Error:

image

Steps To Reproduce:

Files:

// Sidebar.tsx
import React from "react";
import styles from "./ScssModule.module.scss";
...
// ScssModule.module.scss
.logo{
  letter-spacing: 3px;
}

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

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],
            alias: {
                '@': path.resolve(__dirname, 'resources/js/')
            }
        },

    });

Also I tried to add in types:

// index.d.ts

declare module '*.scss' {
    const content: Record<string, string>;
    export default content;
}

I think the problem only is about tsconfig / laravel-mix, because in result of code is correct, Is scopping the class with hash

image

Result in production: image

Any idea why happens this?

sefirosweb avatar Aug 28 '22 14:08 sefirosweb