diff --git a/src/lib/core/BUILD.bazel b/src/lib/core/BUILD.bazel
index 7610b8c12f9..2ef2e7ed820 100644
--- a/src/lib/core/BUILD.bazel
+++ b/src/lib/core/BUILD.bazel
@@ -7,7 +7,7 @@ ng_module(
   name = "core",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/core",
-  assets = [":pseudo_checkbox_css"],
+  assets = [":pseudo_checkbox_css", ":option_css", ":optgroup_css"],
   deps = [
     "//src/cdk/bidi",
     "//src/cdk/coercion",
@@ -32,6 +32,18 @@ sass_binary(
   deps = [":core_scss_lib"],
 )
 
+sass_binary(
+  name = "option_scss",
+  src = "option/option.scss",
+  deps = [":core_scss_lib"],
+)
+
+sass_binary(
+  name = "optgroup_scss",
+  src = "option/optgroup.scss",
+  deps = [":core_scss_lib"],
+)
+
 # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
 # Copy the output of the sass_binary such that the filename and path match what we expect.
 genrule(
@@ -40,3 +52,17 @@ genrule(
   outs = ["selection/pseudo-checkbox/pseudo-checkbox.css"],
   cmd = "cat $(locations :pseudo_checkbox_scss) > $@",
 )
+
+genrule(
+  name = "option_css",
+  srcs = [":option_scss"],
+  outs = ["option/option.css"],
+  cmd = "cat $(locations :option_scss) > $@",
+)
+
+genrule(
+  name = "optgroup_css",
+  srcs = [":optgroup_scss"],
+  outs = ["option/optgroup.css"],
+  cmd = "cat $(locations :optgroup_scss) > $@",
+)
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index a4aef3daca7..1162cfbe057 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -6,9 +6,7 @@
 // Core styles that can be used to apply material design treatments to any element.
 @import 'style/elevation';
 @import 'ripple/ripple';
-@import 'option/option';
 @import 'option/option-theme';
-@import 'option/optgroup';
 @import 'option/optgroup-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
 @import 'typography/all-typography';
@@ -26,8 +24,6 @@
 
   @include angular-material-typography($typography-config);
   @include mat-ripple();
-  @include mat-option();
-  @include mat-optgroup();
   @include cdk-a11y();
   @include cdk-overlay();
 }
diff --git a/src/lib/core/option/_optgroup.scss b/src/lib/core/option/_optgroup.scss
deleted file mode 100644
index 2ca79af39db..00000000000
--- a/src/lib/core/option/_optgroup.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
-
-@mixin mat-optgroup() {
-  .mat-optgroup-label {
-    @include mat-menu-item-base();
-    @include user-select(none);
-    cursor: default;
-  }
-}
diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss
deleted file mode 100644
index fdb4bf884dd..00000000000
--- a/src/lib/core/option/_option.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
-@import '../style/layout-common';
-@import '../../../cdk/a11y/a11y';
-
-/**
- * This mixin contains shared option styles between the select and
- * autocomplete components.
- */
-@mixin mat-option() {
-  .mat-option {
-    @include mat-menu-item-base();
-    position: relative;
-    cursor: pointer;
-    outline: none;
-    display: flex;
-    flex-direction: row;
-    max-width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-
-    &[aria-disabled='true'] {
-      @include user-select(none);
-      cursor: default;
-    }
-
-    .mat-optgroup &:not(.mat-option-multiple) {
-      padding-left: $mat-menu-side-padding * 2;
-
-      [dir='rtl'] & {
-        padding-left: $mat-menu-side-padding;
-        padding-right: $mat-menu-side-padding * 2;
-      }
-    }
-  }
-
-  // Collapses unwanted whitespace created by newlines in code like the following:
-  // <mat-option>
-  //   {{value}}
-  // </mat-option>
-  .mat-option-text {
-    display: inline-block;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .mat-option-ripple {
-    @include mat-fill;
-
-    // Disable pointer events for the ripple container because the container will overlay the
-    // user content and we don't want to disable mouse events on the user content.
-    // Pointer events can be safely disabled because the ripple trigger element is the host element.
-    pointer-events: none;
-
-    // Prevents the ripple from completely covering the option in high contrast mode.
-    @include cdk-high-contrast {
-      opacity: 0.5;
-    }
-  }
-
-  .mat-option-pseudo-checkbox {
-    $margin: $mat-menu-side-padding / 2;
-    margin-right: $margin;
-
-    [dir='rtl'] & {
-      margin-left: $margin;
-      margin-right: 0;
-    }
-  }
-}
-
diff --git a/src/lib/core/option/optgroup.scss b/src/lib/core/option/optgroup.scss
new file mode 100644
index 00000000000..ddea6ae3db5
--- /dev/null
+++ b/src/lib/core/option/optgroup.scss
@@ -0,0 +1,8 @@
+@import '../style/menu-common';
+@import '../style/vendor-prefixes';
+
+.mat-optgroup-label {
+  @include mat-menu-item-base();
+  @include user-select(none);
+  cursor: default;
+}
diff --git a/src/lib/core/option/optgroup.ts b/src/lib/core/option/optgroup.ts
index 87cd4b35c2f..512177a99c6 100644
--- a/src/lib/core/option/optgroup.ts
+++ b/src/lib/core/option/optgroup.ts
@@ -29,6 +29,7 @@ let _uniqueOptgroupIdCounter = 0;
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['disabled'],
+  styleUrls: ['optgroup.css'],
   host: {
     'class': 'mat-optgroup',
     'role': 'group',
diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss
new file mode 100644
index 00000000000..7b522635bb8
--- /dev/null
+++ b/src/lib/core/option/option.scss
@@ -0,0 +1,65 @@
+@import '../style/menu-common';
+@import '../style/vendor-prefixes';
+@import '../style/layout-common';
+@import '../../../cdk/a11y/a11y';
+
+.mat-option {
+  @include mat-menu-item-base();
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+
+  &[aria-disabled='true'] {
+    @include user-select(none);
+    cursor: default;
+  }
+
+  .mat-optgroup &:not(.mat-option-multiple) {
+    padding-left: $mat-menu-side-padding * 2;
+
+    [dir='rtl'] & {
+      padding-left: $mat-menu-side-padding;
+      padding-right: $mat-menu-side-padding * 2;
+    }
+  }
+}
+
+// Collapses unwanted whitespace created by newlines in code like the following:
+// <mat-option>
+//   {{value}}
+// </mat-option>
+.mat-option-text {
+  display: inline-block;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mat-option-ripple {
+  @include mat-fill;
+
+  // Disable pointer events for the ripple container because the container will overlay the
+  // user content and we don't want to disable mouse events on the user content.
+  // Pointer events can be safely disabled because the ripple trigger element is the host element.
+  pointer-events: none;
+
+  // Prevents the ripple from completely covering the option in high contrast mode.
+  @include cdk-high-contrast {
+    opacity: 0.5;
+  }
+}
+
+.mat-option-pseudo-checkbox {
+  $margin: $mat-menu-side-padding / 2;
+  margin-right: $margin;
+
+  [dir='rtl'] & {
+    margin-left: $margin;
+    margin-right: 0;
+  }
+}
diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts
index 64666edb966..40d1dfbca8f 100644
--- a/src/lib/core/option/option.ts
+++ b/src/lib/core/option/option.ts
@@ -76,6 +76,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
     '(keydown)': '_handleKeydown($event)',
     'class': 'mat-option',
   },
+  styleUrls: ['option.css'],
   templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,