sass with netlify build

chriscoyier · chriscoyier · commit 47d6b458597e · 2020-06-09T06:53:28.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,6 @@
 .DS_Store
 .AppleDouble
 .LSOverride
+
+# Local Netlify folder
+.netlify
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,17 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[context.production]
+  environment = { NODE_VERSION = "10.15.3", NODE_ENV = "production" }
+
+[dev]
+  command = "npm run start"
+  publish = "dist"
+  port = 3000
+  targetPort = 8181
+  NODE_ENV = "development"
+
+# Using the `.toml` version of this config file as plugins don't seem to work with the .yml style.
+[[plugins]]
+  package = "/plugins/sass"
diff --git a/netlify.yml b/netlify.yml
diff --git a/package.json b/package.json
@@ -9,21 +9,12 @@
     "url": "https://github.com/CSS-Tricks/build-process"
   },
   "scripts": {
-    "build": "npm-run-all build:css build:html",
-    "build:css": "node-sass src/site/_includes/css/main.scss > src/site/css/main.css",
-    "build:html": "eleventy",
-    "watch": "npm-run-all --parallel watch:css watch:html",
-    "watch:css": "node-sass --watch src/site/_includes/css/main.scss > src/site/css/main.css",
-    "watch:html": "eleventy --serve --port=8181",
-    "start": "npm run watch"
+    "build": "eleventy",
+    "start": "netlify dev"
   },
   "dependencies": {
     "@11ty/eleventy": "^0.10.0",
     "html-minifier": "^4.0.0",
-    "node-sass": "^4.13.1",
-    "npm-run-all": "^4.1.5"
-  },
-  "devDependencies": {
-    "@netlify/plugin-sitemap": "^0.1.0"
+    "node-sass": "^4.13.1"
   }
 }
diff --git a/plugins/doThing/index.js b/plugins/doThing/index.js
diff --git a/plugins/sass/index.js b/plugins/sass/index.js
@@ -0,0 +1,7 @@
+module.exports = {
+  onPreBuild: async ({ utils: { run } }) => {
+    await run.command(
+      "node-sass src/site/_includes/css/main.scss src/site/css/main.css"
+    );
+  },
+};
diff --git a/plugins/sass/manifest.yml b/plugins/sass/manifest.yml
@@ -0,0 +1 @@
+name: sass
diff --git a/src/site/_includes/css/main.scss b/src/site/_includes/css/main.scss
@@ -11,7 +11,7 @@ html {
   --yellow: #fff72c;
 
   font: 1.2rem/1.3 "PT Serif", serif;
-  font-weight: bold;
+  font-weight: bolder;
   background: #1b1b1b;
   color: white;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ html {`
`11`	`11`	`--yellow: #fff72c;`
`12`	`12`
`13`	`13`	`font: 1.2rem/1.3 "PT Serif", serif;`
`14`		`- font-weight: bold;`
	`14`	`+ font-weight: bolder;`
`15`	`15`	`background: #1b1b1b;`
`16`	`16`	`color: white;`
`17`	`17`	`}`