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",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"webpack-dev-server": "^4.11.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/material": "^5.10.9",
"@types/jest": "^29.1.1",
"@types/node": "^18.8.2",
"@types/node-sass": "^4.11.3",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0",

View File

@ -1,12 +1,27 @@
import React from 'react'
import { Button, Box } from "@mui/material"
import variables from "./variables.module.scss"
import "./style.scss"
export default function App() {
let boxStyle = {
width: "50%",
height: "50%",
border: '1px dashed grey',
backgroundColor: variables.boxBg,
display: "flex",
alignItems: "center",
justifyContent: "center"
}
return (
<main id="root">
<h1>React with Webpack</h1>
<Button variant="contained">Hello world</Button>
<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>
</main>
);

View File

@ -1,6 +1,9 @@
$box-background: blue;
$container-background: lime;
$title-color: cyan;
@import "variables.module.scss";
body {
background: #333;
color: #c5c8c6;
}
main {
h1 {
@ -8,6 +11,7 @@ main {
text-align: center;
}
#container {
display: flex;
background-color: $container-background;
@ -26,6 +30,4 @@ main {
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: [
// Creates `style` nodes from JS strings
"style-loader",
@ -50,7 +50,10 @@ module.exports = {
]
},
resolve: {
extensions: [".tsx", ".jsx", ".js"],
extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
alias: {
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
}
},
plugins: [
new HtmlWebpackPlugin({