Storybook: Font Face weird path issue

[NaveenThally]

I'm using the Webpack in full control mode and overriding some configurations as well below is my code in .storybook

var genDefaultWebpackConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js'),
    config = require("../config");

    const path = require('path');


function addPostCssConfig(webpackConfig) {
    webpackConfig.postcss = function () {
        return [
            require('postcss-smart-import')({
                path: [
                    config.paths.Src,
                    config.paths.Build
                ]
            }),
            require("postcss-cssnext")(),
            require("postcss-browser-reporter")(),
            require("postcss-reporter")()
        ];
    };
}

function addLoaders(webpackConfig) {
    webpackConfig.module.preLoaders = [
      {
        test: /\.(js|jsx)$/,
        loaders: [ 'eslint-loader' ],
        include: [
          config.paths.Src,
          config.paths.Build
        ],
        exclude: /node_modules/
      }
    ],

    webpackConfig.module.loaders.forEach(function (moduleLoader, index) {

        if(RegExp(moduleLoader.test).test(".woff")) {

             webpackConfig.module.loaders[index] = {
                test: /\.(woff|woff2)(\?.*)?$/,
                include:[
                    config.paths.Src,
                    config.paths.Build,
                    path.resolve(__dirname,"../src/assets/styles/fonts")
                ],
                loaders:[ 
                    `url?${
                    JSON.stringify({
                        importLoaders: 1,
                        sourceMap: true,
                        modules: true, 
                        name: "[name].[ext]",
                        limit: 1000000000
                    })}`
                 ]

            };

        }
        else if (RegExp(moduleLoader.test).test("SampleStyleSheetRegexTestingName.css")) {

            webpackConfig.module.loaders[index] = {
                test: /\.css$/,
                include: [
                    config.paths.Src,
                    config.paths.Build
                ],
                loaders: [
                    'style-loader',
                    `resolve-url-loader?${
                        JSON.stringify({
                            silent: true
                        })}`,
                    `css-loader?${
                        JSON.stringify({
                            importLoaders: 1,
                            sourceMap: true,
                            modules: true,
                            isDebug: true,
                            minimize: false,
                            localIndentName: "[name]-[local]-[hash:base64:5]"
                        })}`,
                    'postcss-loader'
                ]
            };
        }  
    });
}

function addDevServerConfig(webpackConfig) {
    webpackConfig.devServer = Object.assign({}, webpackConfig.devServer);
    webpackConfig.devServer.noInfo = true;
    webpackConfig.devServer.hot = true;
}

module.exports = function (config, env) {
    var storybookBaseConfig = genDefaultWebpackConfig(config, env);

    if (env === "PRODUCTION") {

    } else {

        addPostCssConfig(storybookBaseConfig);
        addDevServerConfig(storybookBaseConfig);
        addLoaders(storybookBaseConfig);

    }
    return storybookBaseConfig;
};

My folder structure is as follows

--assets
   --styles
      -- fonts
         -- fonts.css
      -- base
          -- base.css
      -- colors
--components
    --Button
        --  __stories
             -- index.jsx
        -- Button.jsx
        -- Button.css
        -- abfont.woff

Font Face seems to work seamlessly when the woff file is present in the components css in the above structure.

But if i try to move the abfont.woff file to fonts folder and add @font-face css in fonts.css and import it in base.css and import base.css in my components css i.e, Button.css will have imported base.css , then i'm getting the following error, I'm literally confused why this is happening

ERROR in ./~/resolve-url-loader?{"silent":true}!./~/css-loader?{"importLoaders":1,"sourceMap":true,"modules":true,"isDebug":true,"minimize":false,"localIndentName":"[name]-[local]-[hash:base64:5]"}!./~/postcss-loader!./src/components/Button/Button.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./abfont.woff in /Library/WebServer/Documents/yoda-core-components/src/components/Button
 @ ./~/resolve-url-loader?{"silent":true}!./~/css-loader?{"importLoaders":1,"sourceMap":true,"modules":true,"isDebug":true,"minimize":false,"localIndentName":"[name]-[local]-[hash:base64:5]"}!./~/postcss-loader!./src/components/Button/Button.css 6:394-421

Can you guys let me know what exactly i'm missing in the configuration. which is resulting in the error.

[marc-rutkowski]

@NaveenThally The error tells you that the jcp-icons.woff file cannot be found.
Maybe this is just a typo problem?

[NaveenThally]

@marc-rutkowski i have edited to avoid confusion marc, I took the error from terminal and pasted it that caused the confusion.

[font]

Please be careful when you use @mention as you unintentionally mentioned me. :) You can edit it and use back-ticks to prevent it. Thanks!

[marc-rutkowski]

@NaveenThally I think the problem is strictly a webpack config issue.

And because you override the default storybook config by a custom one it as very probably nothing to do with react-storybook.

So would you mind closing this issue and search for help on SO or some other more appropriate place?

[NaveenThally]

ok @marc-rutkowski .