Export SASS styles from a public folder by referencing the internal files

export-from-sass-dir.patch

diff --git a/client/assets/stylesheets/shared/_typography.scss b/client/assets/stylesheets/shared/_typography.scss
index 4a59103c03..34e69045bb 100644
--- a/client/assets/stylesheets/shared/_typography.scss
+++ b/client/assets/stylesheets/shared/_typography.scss
@@ -1,4 +1,4 @@
-@import '~@automattic/components/src/styles/_typography.scss';
+@import '~@automattic/components/sass/_typography.scss';
 
 // Typeface Variables
 
diff --git a/client/assets/stylesheets/shared/mixins/_mixins.scss b/client/assets/stylesheets/shared/mixins/_mixins.scss
index e1dd7c9f16..c38eb073ad 100645
--- a/client/assets/stylesheets/shared/mixins/_mixins.scss
+++ b/client/assets/stylesheets/shared/mixins/_mixins.scss
@@ -1,8 +1,8 @@
 
 @import 'banner';
-@import '~@automattic/components/src/styles/_breakpoints.scss';
+@import '~@automattic/components/sass/_breakpoints.scss';
 @import 'calc';
-@import '~@automattic/components/src/styles/_clear-fix.scss';
+@import '~@automattic/components/sass/_clear-fix.scss';
 @import 'clear-text';
 @import 'dropdown-menu';
 @import 'elevation';
diff --git a/docs/coding-guidelines/css.md b/docs/coding-guidelines/css.md
index 3a16061f14..08c2c217a5 100644
--- a/docs/coding-guidelines/css.md
+++ b/docs/coding-guidelines/css.md
@@ -98,7 +98,7 @@ Under the hood, we are using webpack and its `sass-loader`, for compiling the st
 
 ## Media Queries
 
-We don't do device specific breakpoints, we use layout-specific breakpoints that communicate the state of the UI. DO NOT define your own media queries. Utilize the mixins [provided in `_breakpoints.scss`](https://github.com/Automattic/wp-calypso/blob/master/packages/components/src/styles/_breakpoints.scss). Furthermore, we are pushing for a mobile-first approach to media queries, meaning your default styles should apply to mobile, and desktop should build on top of that. This means that devices with smaller screens have to process less CSS (which makes sense since they are generally less powerful). You should avoid the use of `<` breakpoints like this:
+We don't do device specific breakpoints, we use layout-specific breakpoints that communicate the state of the UI. DO NOT define your own media queries. Utilize the mixins [provided in `_breakpoints.scss`](https://github.com/Automattic/wp-calypso/blob/master/packages/components/sass/_breakpoints.scss). Furthermore, we are pushing for a mobile-first approach to media queries, meaning your default styles should apply to mobile, and desktop should build on top of that. This means that devices with smaller screens have to process less CSS (which makes sense since they are generally less powerful). You should avoid the use of `<` breakpoints like this:
 
 Bad:
 ```scss
diff --git a/packages/components/sass/_breakpoints.scss b/packages/components/sass/_breakpoints.scss
new file mode 100644
index 0000000000..320d116600
--- /dev/null
+++ b/packages/components/sass/_breakpoints.scss
@@ -0,0 +1 @@
+@import '../src/styles/_breakpoints.scss';
diff --git a/packages/components/sass/_clear-fix.scss b/packages/components/sass/_clear-fix.scss
new file mode 100644
index 0000000000..aad5011479
--- /dev/null
+++ b/packages/components/sass/_clear-fix.scss
@@ -0,0 +1 @@
+@import '../src/styles/_clear-fix.scss';
diff --git a/packages/components/sass/_typography.scss b/packages/components/sass/_typography.scss
new file mode 100644
index 0000000000..a0821128a5
--- /dev/null
+++ b/packages/components/sass/_typography.scss
@@ -0,0 +1 @@
+@import '../src/styles/_typography.scss';