diff --git a/src/atoms/Checkbox.js b/src/atoms/Checkbox.js
index 58f7559f0c38206c3aad8a0527af9c284baa5a36..8dde21105feae9b353897c64821815a7f39ebf7b 100644
--- a/src/atoms/Checkbox.js
+++ b/src/atoms/Checkbox.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import classes from './Checkbox.local.css'
+import classes from './Checkbox.local.scss'
 
 const Checkbox = ({ inline, name, value, label, checked, required, onChange }) => (
   <label className={classnames(classes.root, {
diff --git a/src/atoms/Checkbox.local.css b/src/atoms/Checkbox.local.scss
similarity index 100%
rename from src/atoms/Checkbox.local.css
rename to src/atoms/Checkbox.local.scss
diff --git a/src/atoms/File.js b/src/atoms/File.js
index b6d42c39aaa81218142470b374036c0016ab260e..975470d80a3b1881118de3032427132f208497b3 100644
--- a/src/atoms/File.js
+++ b/src/atoms/File.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './File.local.css'
+import classes from './File.local.scss'
 
 const extension = ({ name }) => name.replace(/^.+\./, '')
 
diff --git a/src/atoms/File.local.css b/src/atoms/File.local.scss
similarity index 100%
rename from src/atoms/File.local.css
rename to src/atoms/File.local.scss
diff --git a/src/atoms/Menu.js b/src/atoms/Menu.js
index 32f81ed11a45487eeafedfa02eeac405e9519763..bc97f93b1d7362c15d556d2349aa60228b81e7b8 100644
--- a/src/atoms/Menu.js
+++ b/src/atoms/Menu.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import classes from './Menu.local.css'
+import classes from './Menu.local.scss'
 
 // TODO: match the width of the container to the width of the widest option?
 
diff --git a/src/atoms/Menu.local.css b/src/atoms/Menu.local.scss
similarity index 100%
rename from src/atoms/Menu.local.css
rename to src/atoms/Menu.local.scss
diff --git a/src/atoms/Radio.js b/src/atoms/Radio.js
index 222809483eaab7eb2092764254f87caaaf9c964e..195e94c18ce9fe12a57d5bb1479cea6ba60a89da 100644
--- a/src/atoms/Radio.js
+++ b/src/atoms/Radio.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import classes from './Radio.local.css'
+import classes from './Radio.local.scss'
 
 const Radio = ({ inline, name, value, label, checked, required, onChange }) => (
   <label className={classnames(classes.root, {
diff --git a/src/atoms/Radio.local.css b/src/atoms/Radio.local.scss
similarity index 100%
rename from src/atoms/Radio.local.css
rename to src/atoms/Radio.local.scss
diff --git a/src/atoms/Tags.js b/src/atoms/Tags.js
index e4578f414f030d330f7f399fb8aa6cbb3c8febcd..63fe2c53cce7bc247ae9de6bac07b6f0ddea71ad 100644
--- a/src/atoms/Tags.js
+++ b/src/atoms/Tags.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactTags from 'react-tag-autocomplete'
-import './Tags.css'
+import './Tags.scss'
 
 // TODO: separate tags when pasted
 // TODO: allow tags to be edited
diff --git a/src/atoms/Tags.css b/src/atoms/Tags.scss
similarity index 100%
rename from src/atoms/Tags.css
rename to src/atoms/Tags.scss
diff --git a/src/atoms/TextField.js b/src/atoms/TextField.js
index 8aad7d3eec172d755af060502c342bee9628a2e6..4cb81ff82b36ffacbdb7dd9aae65c6afc15dc2b6 100644
--- a/src/atoms/TextField.js
+++ b/src/atoms/TextField.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './TextField.local.css'
+import classes from './TextField.local.scss'
 
 const TextField = ({ label, name, placeholder, required, type = 'text', value, onChange }) => (
   <label className={classes.root}>
diff --git a/src/atoms/TextField.local.css b/src/atoms/TextField.local.scss
similarity index 100%
rename from src/atoms/TextField.local.css
rename to src/atoms/TextField.local.scss
diff --git a/src/atoms/UploadingFile.js b/src/atoms/UploadingFile.js
index fc81257664ab53e636f726eec6f6711473865be0..ecb3a865608797b9f52fdfff04701e0ccd618102 100644
--- a/src/atoms/UploadingFile.js
+++ b/src/atoms/UploadingFile.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './UploadingFile.local.css'
+import classes from './UploadingFile.local.scss'
 
 // TODO: cancel button
 
diff --git a/src/atoms/UploadingFile.local.css b/src/atoms/UploadingFile.local.scss
similarity index 100%
rename from src/atoms/UploadingFile.local.css
rename to src/atoms/UploadingFile.local.scss
diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
index 5e01471abc3daccb22db935bc32d2381ef222987..5bbec1e0f4b81afe1f8dc3f59d39df8a31240712 100644
--- a/src/atoms/ValidatedField.js
+++ b/src/atoms/ValidatedField.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import classes from './ValidatedField.local.css'
+import classes from './ValidatedField.local.scss'
 
 // TODO: pass ...props.input to children automatically?
 
diff --git a/src/atoms/ValidatedField.local.css b/src/atoms/ValidatedField.local.scss
similarity index 100%
rename from src/atoms/ValidatedField.local.css
rename to src/atoms/ValidatedField.local.scss
diff --git a/src/molecules/AppBar.js b/src/molecules/AppBar.js
index 1aa41a8911a9495e2990cd67be78b39b5fd0329a..ab9443f71b2a0b8efc2f671e2fafb6e26132f54e 100644
--- a/src/molecules/AppBar.js
+++ b/src/molecules/AppBar.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router'
 import classnames from 'classnames'
-import classes from './AppBar.local.css'
+import classes from './AppBar.local.scss'
 
 const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
   <div className={classes.root}>
diff --git a/src/molecules/AppBar.local.css b/src/molecules/AppBar.local.scss
similarity index 100%
rename from src/molecules/AppBar.local.css
rename to src/molecules/AppBar.local.scss
diff --git a/src/molecules/Files.js b/src/molecules/Files.js
index b376f4ceafa112d2e9ea6150a8a307bf21a3f40e..e6dc89f78260cdb99adc6bd98d6388c0613de9e4 100644
--- a/src/molecules/Files.js
+++ b/src/molecules/Files.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './Files.local.css'
+import classes from './Files.local.scss'
 import Upload from './Upload'
 import File from '../atoms/File'
 
diff --git a/src/molecules/Files.local.css b/src/molecules/Files.local.scss
similarity index 100%
rename from src/molecules/Files.local.css
rename to src/molecules/Files.local.scss
diff --git a/src/molecules/YesOrNo.js b/src/molecules/YesOrNo.js
index 8f6c8cf81cd9bbfeb3801f7dbaa580332c8acf0d..1d16de39d3910f7f9f311eb68124fe044cd630e7 100644
--- a/src/molecules/YesOrNo.js
+++ b/src/molecules/YesOrNo.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import RadioGroup from './RadioGroup'
-import classes from './YesOrNo.local.css'
+import classes from './YesOrNo.local.scss'
 
 const options = [
   {
diff --git a/src/molecules/YesOrNo.local.css b/src/molecules/YesOrNo.local.scss
similarity index 100%
rename from src/molecules/YesOrNo.local.css
rename to src/molecules/YesOrNo.local.scss