diff --git a/src/components/StyleGuideRenderer.js b/src/components/StyleGuideRenderer.js
index 3a7d1428cad53a745ed56bfdb1f5e7fb3a57a6b7..5826fb002247cda5ef5ce27e29339e3b321e33b0 100644
--- a/src/components/StyleGuideRenderer.js
+++ b/src/components/StyleGuideRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import 'xpub-fonts'
-import classes from './StyleGuideRenderer.local.css'
+import classes from './StyleGuideRenderer.local.scss'
 
 const StyleGuideRenderer = ({ title, children, toc }) => {
   return (
diff --git a/src/components/StyleGuideRenderer.local.css b/src/components/StyleGuideRenderer.local.scss
similarity index 100%
rename from src/components/StyleGuideRenderer.local.css
rename to src/components/StyleGuideRenderer.local.scss
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 211b2dcb3187ced95005010e991b4c36bbd262d1..26be4c62115deae54dd2b2aef3bdbf0f6ed496de 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -4,7 +4,7 @@ import { reducer as formReducer } from 'redux-form'
 import { createStore, combineReducers } from 'redux'
 
 import 'xpub-fonts'
-import classes from './Wrapper.local.css'
+import classes from './Wrapper.local.scss'
 
 const rootReducer = combineReducers({
   form: formReducer
diff --git a/src/components/Wrapper.local.css b/src/components/Wrapper.local.scss
similarity index 100%
rename from src/components/Wrapper.local.css
rename to src/components/Wrapper.local.scss