diff --git a/packages/grafana-toolkit/src/config/webpack/loaders.ts b/packages/grafana-toolkit/src/config/webpack/loaders.ts
index 188ab5b751c..d286ae416ed 100644
--- a/packages/grafana-toolkit/src/config/webpack/loaders.ts
+++ b/packages/grafana-toolkit/src/config/webpack/loaders.ts
@@ -4,7 +4,7 @@ import { getPluginId } from '../utils/getPluginId';
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const supportedExtensions = ['css', 'scss', 'less'];
+const supportedExtensions = ['css', 'scss', 'less', 'sass'];
 
 const getStylesheetPaths = (root: string = process.cwd()) => {
   return [`${root}/src/styles/light`, `${root}/src/styles/dark`];
@@ -110,7 +110,7 @@ export const getStyleLoaders = () => {
       exclude: [`${styleDir}light.css`, `${styleDir}dark.css`],
     },
     {
-      test: /\.scss$/,
+      test: /\.s[ac]ss$/,
       use: ['style-loader', ...cssLoaders, 'sass-loader'],
       exclude: [`${styleDir}light.scss`, `${styleDir}dark.scss`],
     },