webpack is not able to find css files in vendor

Question

I am trying to publish some react components to npm. If I remove style reference from index.js webpack build works fine.

If I use css reference there are error message like below;

> test-package-ui@1.1.3 build D:\GitHub\TestReactJS\Tarnet-UI2
> webpack

Hash: 41b749d6373d65cfbc28
Version: webpack 4.41.3
Time: 643ms
Built at: 12/19/2019 1:56:37 AM
 1 asset
Entrypoint main = index.js
[0] external "react" 42 bytes {0} [built]
[1] ./src/index.js 732 bytes {0} [built]
[5] ./src/containers/App.js 2.14 KiB {0} [built]
    + 3 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'assets/vendors/style' in 'D:\GitHub\TestReactJS\Tarnet-UI2\src'
 @ ./src/index.js 12:0-31
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! tarnet-ui@1.1.3 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the tarnet-ui@1.1.3 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

index.js (this is my react components entry file. assets in same folder)

    import React from 'react';
    import "assets/vendors/style" //How to make webpack recognize this?

    import Cards from './components/CardBox';
    import GalleyCard from './components/Cards/Card3';
    import App from './containers/App';

export {App, Cards, GalleyCard}

webpack.config.js:

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react' 
  }
};

Answer 1

Depending on your file structure, you'll probably need to write like this:

import "../../assets/vendors/style"

Where the number of ../ are the number of directories back to your assets directory.