Fix Sass warnings

.storybook/main.js

@@ -13,7 +13,19 @@ module.exports = {
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
       test: /\.scss$/,
-      use: ["style-loader", "css-loader", "sass-loader"],
+      use: [
+        "style-loader",
+        "css-loader",
+        {
+          loader: "sass-loader",
+          options: {
+            sassOptions: {
+              quietDeps: true,
+              silenceDeprecations: ["import"],
+            },
+          },
+        },
+      ],
       include: path.resolve(__dirname, "../"),
     });
     return config;

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { DocsContainer } from "@storybook/addon-docs";
 import { themes } from "@storybook/theming";
-import "vanilla-framework/scss/build.scss";
+import "./vanilla.scss";
 
 // or global addParameters
 export const parameters = {

.storybook/vanilla.scss

@@ -0,0 +1,2 @@
+@import "vanilla-framework";
+@include vanilla;

src/components/LoadingCard/LoadingCard.scss

@@ -1,14 +1,4 @@
 .p-card--placeholder {
-  @keyframes shine {
-    0% {
-      background-position: right;
-    }
-
-    100% {
-      background-position: left;
-    }
-  }
-
   animation: shine 3s infinite ease-in-out;
   background-image: linear-gradient(
     to bottom right,
@@ -18,4 +8,14 @@
   );
   background-size: 300% 300%;
   clip-path: url("#animation-mask");
+
+  @keyframes shine {
+    0% {
+      background-position: right;
+    }
+
+    100% {
+      background-position: left;
+    }
+  }
 }