diff --git a/.gitignore b/.gitignore
index e08b583e01d503e8b757c8743b45c08851473316..a1e39a3bde41460486576680912c689425d473e1 100755
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,4 @@
 .DS_Store
 gesso/
 !gesso/gesso_helper
-css/pattern-lab.css
-css/pattern-lab.scss
-css/styles.scss
-css/styles.css
-css/uw-dashboards.css
+css/
diff --git a/gulpfile.js b/gulpfile.js
index 14c9cf58dd139142c8f7702137d3e2e75609a783..22586269630c5556e882be0406208eae07134171 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -42,6 +42,31 @@ const compileComponentScripts = () => {
 
 const cssSrc = path.join(__dirname, '..', 'css');
 
+const PLSrc = [
+  path.join(__dirname, '/source/pattern-lab.scss')
+];
+
+const compilePLStyles = () => {
+  return src(PLSrc)
+    .pipe(sassGlob())
+    .pipe(sourcemaps.init())
+    .pipe(
+      sass({
+        includePaths: ['./node_modules/breakpoint-sass/stylesheets'],
+        precision: 10,
+      })
+    )
+    .pipe(
+      postcss([
+        require('postcss-assets')(),
+        require('autoprefixer')({
+          remove: false,
+        }),
+      ])
+    )
+    .pipe(dest(cssSrc));
+};
+
 const buildConfig = async() => {
   const scssDir = path.join(__dirname, '/source/_patterns/00-config');
   const ymlDir = path.join(__dirname, './source/_data');
@@ -211,12 +236,14 @@ const buildComponentScripts = (exports.buildScripts = series(compileComponentScr
 
 const buildStyles = (exports.buildStyles = series(lintStyles, compileStyles, minifyCSS, compileLayoutStyles, minifyLayoutsCSS));
 
+const buildPLStyle = (exports.buildPLStyles = series(compilePLStyles));
+
 const build = (isProduction = true ) => {
   const scriptTask = isProduction ? bundleScripts : bundleScriptsDev;
   task('bundleScripts', scriptTask)
   return series(
     buildConfig,
-    parallel(task('bundleScripts'), buildStyles, buildComponentScripts, buildPatternLab));
+    parallel(task('bundleScripts'), buildStyles, buildComponentScripts, buildPLStyle, buildPatternLab));
 }
 
 exports.build = build(true);