feat: sass plugin for scss support

SwingDev · Feb 4, 2021 · 3558591 · 3558591
1 parent f88bc0f
commit 3558591
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@snowpack/plugin-dotenv": "^2.0.5",
     "@snowpack/plugin-react-refresh": "^2.4.0",
     "@snowpack/plugin-run-script": "^2.3.0",
+    "@snowpack/plugin-sass": "^1.3.0",
     "@snowpack/plugin-typescript": "^1.2.1",
     "@snowpack/web-test-runner-plugin": "^0.2.1",
     "@types/react": "^17.0.1",

diff --git a/snowpack.config.js b/snowpack.config.js
@@ -16,6 +16,7 @@ module.exports = {
         watch: 'npm run lint:watch',
       },
     ],
+    ['@snowpack/plugin-sass', {}],
     '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
     '@snowpack/plugin-typescript',

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 
 import { App } from '~/App';
 
-import './style.css';
+import './style.scss';
 
 render(
   <React.StrictMode>

diff --git a/src/style.css → src/style.scss b/src/style.css → src/style.scss
@@ -8,6 +8,8 @@ body {
   height: 100%;
 }
 
+$color: black;
+
 .container {
   width: 100%;
   height: 100%;
@@ -16,5 +18,5 @@ body {
   align-items: center;
   justify-content: center;
   font-size: 5em;
-  background-color: black;
+  background-color: $color;
 }