replaced custom webpack configuration with gatsby-plugin-sass; moved …

…fonts to static folder
grafana · Jun 23, 2020 · fc9d891 · fc9d891
1 parent ddd2495
commit fc9d891
Show file tree

Hide file tree

Showing 11 changed files with 341 additions and 141 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -90,6 +90,42 @@ const plugins = [
       fonts: ['roboto mono:300,400'],
     },
   },
+  {
+    resolve: 'gatsby-plugin-svgr-svgo',
+    options: {
+      inlineSvgOptions: [
+        {
+          test: /\.inline.svg$/,
+          svgoConfig: {
+            plugins: [
+              {
+                removeViewBox: false,
+              },
+            ],
+          },
+        },
+      ],
+      urlSvgOptions: [
+        {
+          test: /\.svg$/,
+          svgoConfig: {
+            plugins: [
+              {
+                removeViewBox: false,
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+  {
+    resolve: 'gatsby-plugin-sass',
+    options: {
+      includePaths: ['src/styles/styles.scss'],
+      data: '@import "./src/styles/styles.scss";',
+    },
+  },
   {
     resolve: 'gatsby-plugin-sitemap',
     options: {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -4,138 +4,6 @@ const Path = require('path');
 // auxilary flag to determine the environment (staging/prod)
 const isProduction = process.env.GATSBY_DEFAULT_MAIN_URL === 'https://k6.io';
 
-exports.onCreateWebpackConfig = ({ getConfig, actions, stage, loaders }) => {
-  const { replaceWebpackConfig, setWebpackConfig } = actions;
-  const existingConfig = getConfig();
-  const PRODUCTION = stage !== 'develop';
-  const isSSR = stage.includes('html');
-
-  const rules = existingConfig.module.rules.map((rule) => {
-    if (
-      String(rule.test) === String(/\.(ico|svg|jpg|jpeg|png|gif|webp)(\?.*)?$/)
-    ) {
-      return { ...rule, test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/ };
-    }
-
-    return rule;
-  });
-
-  replaceWebpackConfig({
-    ...existingConfig,
-    module: {
-      ...existingConfig.module,
-      rules,
-    },
-  });
-
-  const sassLoader = {
-    loader: 'sass-loader',
-    options: {
-      sourceMap: !PRODUCTION,
-      implementation: require('sass'),
-    },
-  };
-
-  const sassResourcesLoader = {
-    loader: 'sass-resources-loader',
-    options: {
-      resources: [
-        `${__dirname}/src/styles/variables.scss`,
-        `${__dirname}/src/styles/mixins.scss`,
-      ],
-    },
-  };
-
-  const sassRuleModules = {
-    test: /\.module\.s(a|c)ss$/,
-    use: [
-      !isSSR && loaders.miniCssExtract({ hmr: false }),
-      loaders.css({
-        localIdentName: '[local]_[hash:base64:5]',
-        modules: true,
-        importLoaders: 2,
-      }),
-      loaders.postcss(),
-      sassLoader,
-      sassResourcesLoader,
-    ].filter(Boolean),
-  };
-
-  const sassRule = {
-    test: /\.s(a|c)ss$/,
-    use: isSSR
-      ? [loaders.null()]
-      : [
-          loaders.miniCssExtract(),
-          loaders.css({ importLoaders: 2 }),
-          loaders.postcss(),
-          sassLoader,
-          sassResourcesLoader,
-        ],
-  };
-
-  const inlineSvgRule = {
-    test: /\.inline.svg$/,
-    use: [
-      {
-        loader: require.resolve('@svgr/webpack'),
-        options: {
-          svgoConfig: {
-            removeViewBox: false,
-            cleanupIDs: {
-              prefix: {
-                toString() {
-                  this.counter = this.counter || 0;
-                  return `id-${this.counter++}`;
-                },
-              },
-            },
-          },
-        },
-      },
-    ],
-    issuer: {
-      test: /\.(js|jsx|ts|tsx)$/,
-    },
-  };
-
-  const svgRule = {
-    test: /\.svg$/,
-    use: [loaders.url()],
-    issuer: {
-      test: /\.(js|jsx|ts|tsx)$/,
-    },
-  };
-
-  const nonJsSVGRule = {
-    test: /\.svg$/,
-    use: [loaders.url()],
-    issuer: {
-      test: /\.(?!(js|jsx|ts|tsx)$)([^.]+$)/,
-    },
-  };
-
-  let configRules = [];
-
-  switch (stage) {
-    case 'develop':
-    case 'build-javascript':
-    case 'build-html':
-    case 'develop-html':
-      configRules = configRules.concat([
-        { oneOf: [sassRuleModules, sassRule] },
-        { oneOf: [inlineSvgRule, svgRule, nonJsSVGRule] },
-      ]);
-      break;
-  }
-
-  setWebpackConfig({
-    module: {
-      rules: configRules,
-    },
-  });
-};
-
 async function createDocPages({ graphql, actions }) {
   /*
    * custom path processing rules