Merge pull request #1299 from ONLYOFFICE/bugfix/storybook-added-fonts

Bugfix/storybook added fonts

packages/components/.storybook/preview.js

@@ -2,6 +2,8 @@ import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { withContexts } from "@storybook/addon-contexts/react";
 import { contexts } from "./contexts/index";
 
+import "../../common/opensansoffline.scss";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: { expanded: true },

packages/components/.storybook/webpack.config.js

@@ -34,6 +34,33 @@ module.exports = ({ config }) => {
   //   test: /\.(png|jpe?g|gif|ico)$/i,
   //   type: "asset/resource",
   // });
+  rules.push({
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      "style-loader",
+      // Translates CSS into CommonJS
+      {
+        loader: "css-loader",
+        options: {
+          url: {
+            filter: (url, resourcePath) => {
+              // resourcePath - path to css file
+
+              // Don't handle `/static` urls
+              if (url.startsWith("/static") || url.startsWith("data:")) {
+                return false;
+              }
+
+              return true;
+            },
+          },
+        },
+      },
+      // Compiles Sass to CSS
+      "sass-loader",
+    ],
+  });
 
   rules.push({
     test: /\.svg$/i,

packages/components/package.json

@@ -80,7 +80,7 @@
     "babel-preset-react-app": "^9.1.2",
     "copy-webpack-plugin": "6.4.0",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^6.7.3",
     "enzyme": "^3.11.0",
     "eslint": "^8.11.0",
     "eslint-plugin-jest": "^26.1.1",
@@ -96,7 +96,9 @@
     "react-dom": "^17.0.2",
     "react-json-pretty": "^2.2.0",
     "react-values": "^0.3.3",
+    "sass-loader": "^13.2.0",
     "serve": "^14.1.1",
+    "style-loader": "^3.3.1",
     "styled-components": "^5.3.1",
     "svg-inline-loader": "^0.8.2"
   }