feat(build): Add scss

mozilla · Feb 2, 2016 · 3b6cf03 · 3b6cf03
1 parent 6053b65
commit 3b6cf03
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ npm-debug.log
 
 dist/
 data/content/bundle.js
+data/content/main.css
diff --git a/data/content/activity-streams.html b/data/content/activity-streams.html
@@ -2,6 +2,7 @@
 <html lang=en-us>
   <head>
     <meta charset="utf8">
+    <link rel="stylsheet" href="http://localhost:1963/main.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -41,17 +41,22 @@
     "jpm": "^1.0.5",
     "json-loader": "^0.5.4",
     "live-server": "^0.9.1",
+    "node-sass": "^3.4.2",
     "npm-run-all": "^1.5.1",
     "webpack": "^2.0.6-beta",
     "webpack-notifier": "^1.2.1",
     "yamljs": "^0.2.4",
     "yamscripts": "^0.0.2"
   },
   "scripts": {
+    "bundle": "npm-run-all bundle:*",
+    "bundle:webpack": "webpack",
+    "bundle:css": "node-sass src/main.scss -o data/content",
     "start": "npm-run-all --parallel start:*",
     "start:webpack": "webpack -w",
+    "start:css": "npm run bundle:css && npm run bundle:css -- -w",
     "start:server": "live-server data/content --port=1963 --no-browser",
-    "run": "jpm run -b nightly",
+    "firefox": "jpm run -b nightly",
     "test": "npm-run-all test:*",
     "test:lint": "eslint .",
     "test:jpm": "jpm test",

diff --git a/src/main.scss b/src/main.scss
@@ -0,0 +1 @@
+@import './styles/normalize';
diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss
@@ -0,0 +1,22 @@
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+[hidden] {
+  display: none !important;
+}
diff --git a/yamscripts.yml b/yamscripts.yml
@@ -1,16 +1,24 @@
 # This file compiles to package.json scripts.
-# When you add or modify anything, you *MUST* run npm run yamscripts
-# to compile your changes
+# When you add or modify anything, you *MUST* run:
+#      npm run yamscripts
+# to compile your changes.
 
 scripts:
+
+# bundle: Bundle assets for production
+  bundle:
+    webpack: webpack
+    css: node-sass src/main.scss -o data/content
+
 # start: Start watching/compiling assets,
-# launch addon with jpm run
   start:
     _parallel: true
     webpack: webpack -w
+    css: =>bundle:css && =>bundle:css -- -w
     server: live-server data/content --port=1963 --no-browser
 
-  run: jpm run -b nightly
+# firefox: Launch addon with jpm run
+  firefox: jpm run -b nightly
 
 # test: Run tests with eslint, jpm
   test: