Can't resolve element-icons.woff and .ttf in node_modules

Viewed 828

I have a StoryBook implementation on my app. In the app itself the fonts load, but in StoryBook I get an error when I try to import them. How can I solve this?

Error:

in ./src/assets/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/main.scss) Module not found: Error: Can't resolve './node_modules/elements/lib/fonts/element-icons.ttf' in ‘…../src/assets/styles' ERROR in ./src/assets/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/main.scss) Module not found: Error: Can't resolve './node_modules/elements/lib/fonts/element-icons.woff' in ‘…../src/assets/styles

The import (main.scss):

@import 'node_modules/elements/packages/src/index.scss';

Webpack.config.js:

config.module.rules.push(
  {
    test: /\.s?css$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader' },
      { loader: 'sass-loader' }
    ],
  },
  {
    test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
    use: [{
      loader: 'file-loader',
    }]
  },
);
1 Answers

you must write font path in your main.scss

$--font-path: '~element-ui/lib/theme-chalk/fonts';
Related