title: How can I load local fonts with webpack using sass for a custom npm package?
body: <p><strong>Background:</strong></p>
  
  <p>I am writing an NPM package to store styled react components for the sake or reusability. </p>
  
  <p>I have mostly styled components already but am unable to have those inherit the right fonts that are stored locally within the npm package.</p>
  
  <p><strong>Folder structure of the NPM project:</strong></p>
  
  <ul>
  <li>/dist</li>
  <li>/src</li>
  <li>/src/assets/</li>
  <li>/src/components/</li>
  <li>/src/elements/</li>
  <li>/src/styles/</li>
  <li>/src/index.js</li>
  <li>/webpack.config.js</li>
  </ul>
  
  <p><strong>Webpack.config.js</strong></p>
  
  <pre><code>var path = require('path');
  const sass = require("node-sass");
  const sassUtils = require("node-sass-utils")(sass);
  const sassVars = require(__dirname + "/src/styles/theme.js");
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  // Convert js strings to dimenssions
  const convertStringToSassDimension = function(result) {
    // Only attempt to convert strings
    if (typeof result !== "string") {
      return result;
    }
  
    const cssUnits = [
      "rem",
      "em",
      "vh",
      "vw",
      "vmin",
      "vmax",
      "ex",
      "%",
      "px",
      "cm",
      "mm",
      "in",
      "pt",
      "pc",
      "ch"
    ];
    const parts = result.match(/[a-zA-Z]+|[0-9]+/g);
    const value = parts[0];
    const unit = parts[parts.length - 1];
    if (cssUnits.indexOf(unit) !== -1) {
      result = new sassUtils.SassDimension(parseInt(value, 10), unit);
    }
  
    return result;
  };
  
  const dist = path.resolve(__dirname, 'dist');
  const app = path.resolve(__dirname, 'src');
  
  module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
      path: dist,
      filename: 'index.js',
      libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
    },
    module: {
      rules: [
        // Javascript file loading
        {
          test: /\.js$/,
          include: app,
          exclude: /(node_modules|bower_components|dist)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
          test: /\.(scss|sass)$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              { loader: 'css-loader' },
              {
                loader: "sass-loader?sourceMap",
                options: {
                  functions: {
                    "get($keys)": function(keys) {
                      keys = keys.getValue().split(".");
                      var result = sassVars;
                      var i;
                      for (i = 0; i &lt; keys.length; i++) {
                        result = result[keys[i]];
                        // Convert to SassDimension if dimenssion
                        if (typeof result === "string") {
                          result = convertStringToSassDimension(result);
                        } else if (typeof result === "object") {
                          Object.keys(result).forEach(function(key) {
                            var value = result[key];
                            result[key] = convertStringToSassDimension(value);
                          });
                        }
                      }
                      result = sassUtils.castToSass(result);
                      return result;
                    }
                  }
                },
              },
            ],
          })
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'fonts/[name].[ext]'
          }
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin({ filename: '[name].css' })
    ]
  };
  </code></pre>
  
  <p><strong>src/index.js</strong></p>
  
  <pre><code>import Header1 from './elements/Header1';
  import Header2 from './elements/Header2';
  import Header3 from './elements/Header3';
  import Toggle from './elements/Toggle';
  
  module.exports = {
    Header1,
    Header2,
    Header3,
    Toggle,
  };
  </code></pre>
  
  <p><strong>src/elements/Header1.js</strong></p>
  
  <pre><code>import styled from 'styled-components';
  import * as theme from '../styles/theme';
  import '../styles/variables.scss';
  
  const Header1 = styled.h1`
    font-family: brownprott;
    font-weight: bold;
    font-size: 32px;
    color: ${theme.colors.teal};
  `;
  
  export default Header1;
  </code></pre>
  
  <p><strong>src/styles/variables.scss</strong></p>
  
  <pre><code>@import 'typography.scss';
  
  $colors: get("colors");
  
  $white: #FFFFFF;
  $teal: #00EBD0;
  $lightGrey: #DADCDD;
  $darkGrey: #222425;
  $red: #FF0000;
  $info: #1FB6FF;
  $success: #13CE66;
  $danger: #FF4949;
  $warning: #FFC82C;
  </code></pre>
  
  <p><strong>src/styles/typography.scss</strong></p>
  
  <pre><code>$font_path: '~/assets/fonts/';
  
  @font-face {
    font-family: "brownprott";
    src: url($font_path + "brownprott_light.ttf");
    font-weight: "lighter";
  }
  
  @font-face {
    font-family: "brownprott";
    src: url($font_path + "brownprott_regular.ttf");
    font-weight: "normal";
  }
  
  @font-face {
    font-family: "brownprott";
    src: url($font_path + "brownprott_italic.ttf");
    font-weight: "normal";
    font-style: "italic";
  }
  
  @font-face {
    font-family: "brownprott";
    src: url($font_path + "brownprott_bold.ttf");
    font-weight: "bold";
  }
  </code></pre>
  
  <p>Now when I run <code>webpack --watch</code> I get the following output:</p>
  
  <blockquote>
    <p>@npm-module-name@0.0.2 start /path/to/npm-module-name
    webpack --watch</p>
  </blockquote>
  
  <pre><code>Webpack is watching the files…
  
  Hash: 549baa5760d8010ca491
  Version: webpack 4.8.3
  Time: 1148ms
  Built at: 2018-05-25 11:29:58
     Asset       Size  Chunks             Chunk Names
  index.js   55.7 KiB       0  [emitted]  main
  main.css  504 bytes       0  [emitted]  main
  Entrypoint main = index.js main.css
   [2] ./src/styles/theme.js 373 bytes {0} [built]
  [11] ./src/elements/Toggle.js 4.42 KiB {0} [built]
  [12] ./src/elements/Header3.js 1.17 KiB {0} [built]
  [13] ./src/elements/Header2.js 1.17 KiB {0} [built]
  [21] (webpack)/buildin/harmony-module.js 597 bytes {0} [built]
  [23] ./src/elements/Header1.js 1.16 KiB {0} [built]
  [24] ./src/index.js 630 bytes {0} [built]
  [28] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--5-3!./src/styles/variables.scss 712 bytes [built]
  [29] ./src/styles/variables.scss 41 bytes [built]
      + 21 hidden modules
  Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js??ref--5-3!src/styles/variables.scss:
      Entrypoint undefined = extract-text-webpack-plugin-output-filename
      [1] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--5-3!./src/styles/variables.scss 712 bytes {0} [built]
          + 1 hidden module
  </code></pre>
  
  <p>And get the following files generated:</p>
  
  <ul>
  <li>dist/index.js</li>
  <li>main.css</li>
  </ul>
  
  <p>And when I import this npm package into my other project I get:</p>
  
  <p><a href="https://i.stack.imgur.com/PdxmM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PdxmM.png" alt="Console log from the application that is using this custom npm package"></a></p>
  
  <p>Any help/clarity on how to make sure that the project I am working on, can load the fonts within the NPM package successfully and have those seen through the projects that use's it would be great!</p>
  
  <p>Thank you.</p>