laravel-mix
laravel-mix copied to clipboard
Module not found for .scss / .css with laravel mix
- 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:

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

Result in production:

Any idea why happens this?