React components can now access scss variables

This commit is contained in:
Arnaud Fauconnet 2022-10-13 14:21:45 +02:00
parent 2e62d4675b
commit 3b430b9ff7
6 changed files with 46 additions and 13 deletions

2
declarations.d.ts vendored Normal file
View File

@ -0,0 +1,2 @@
// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts').
declare module '*.module.scss';

View File

@ -21,11 +21,13 @@
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"webpack": "^5.74.0", "webpack": "^5.74.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1",
}, "@emotion/react": "^11.10.4",
"dependencies": { "@emotion/styled": "^11.10.4",
"@mui/material": "^5.10.9",
"@types/jest": "^29.1.1", "@types/jest": "^29.1.1",
"@types/node": "^18.8.2", "@types/node": "^18.8.2",
"@types/node-sass": "^4.11.3",
"@types/react": "^18.0.21", "@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"react": "^18.2.0", "react": "^18.2.0",

View File

@ -1,12 +1,27 @@
import React from 'react' import React from 'react'
import { Button, Box } from "@mui/material"
import variables from "./variables.module.scss"
import "./style.scss" import "./style.scss"
export default function App() { export default function App() {
let boxStyle = {
width: "50%",
height: "50%",
border: '1px dashed grey',
backgroundColor: variables.boxBg,
display: "flex",
alignItems: "center",
justifyContent: "center"
}
return ( return (
<main id="root"> <main id="root">
<h1>React with Webpack</h1> <h1>React with Webpack</h1>
<Button variant="contained">Hello world</Button>
<div id="container"> <div id="container">
<div id="box">This box should be centered <br/>(and also this this text)</div> <Box sx={boxStyle}>
This box should be centered <br />(and also this this text)
</Box>
</div> </div>
</main> </main>
); );

View File

@ -1,6 +1,9 @@
$box-background: blue; @import "variables.module.scss";
$container-background: lime;
$title-color: cyan; body {
background: #333;
color: #c5c8c6;
}
main { main {
h1 { h1 {
@ -8,7 +11,8 @@ main {
text-align: center; text-align: center;
} }
#container{
#container {
display: flex; display: flex;
background-color: $container-background; background-color: $container-background;
width: 100vw; width: 100vw;
@ -16,7 +20,7 @@ main {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
#box{ #box {
width: 50%; width: 50%;
height: 50%; height: 50%;
background-color: $box-background; background-color: $box-background;
@ -26,6 +30,4 @@ main {
justify-content: center; justify-content: center;
} }
} }
} }

View File

@ -0,0 +1,9 @@
$box-background: blue;
$container-background: lime;
$title-color: cyan;
:export {
boxBg: $box-background;
containerBg: $container-background;
titleCol: $title-color;
}

View File

@ -33,7 +33,7 @@ module.exports = {
} }
}, },
{ {
test: /\.s[ac]ss$/i, test: /\.scss$/,
use: [ use: [
// Creates `style` nodes from JS strings // Creates `style` nodes from JS strings
"style-loader", "style-loader",
@ -50,7 +50,10 @@ module.exports = {
] ]
}, },
resolve: { resolve: {
extensions: [".tsx", ".jsx", ".js"], extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
alias: {
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
}
}, },
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({