如何处理依赖于.css文件的node_modules内部的模块？

Question

I'm working in a project where some of dependencies are a self made UI library components.

Those components has its proper .css file. The source structure is something like this:

|- src
|-|
  |- components
  |-| 
    | Component
    |-|
      |- index.js
      |- Component.js
      |- Component.css

The same structure is published in a build folder, with each .js file transpiled for a production compatible JavaScript format.

The project I consume this module vw using React-Starter-Kit and when I try to start the service using yarn start or npm start , I get the following error:

SyntaxError: Unexpected token .
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> ([... path to my component inside node_modules]:13:15)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
/pathtomyproject/runServer.js:67
          throw new Error(`Server terminated unexpectedly with code: ${code} signal: ${signal}`);

I guess the problem is about babel trying to read .css files, but I would like to know if someone have a good approach to avoid this kind of problem, using the actual boilerplate I'm using right now (React Starter Kit).

UPDATE

I forgot to mention this. If I import that module using relative path sintax:

import Component, { Styles } from '../../../node_modules/@scope/my-project/Component';

It works as expected, obviously is nice to have syntatic sugar import

Thanks.

Answer 1

According to your answer, I think, that import has to be:

import Styles from './Component.css' ,

it's necessary to add .css extension to show that it's not .js and it has to be processed by css-loaders (in case if webpack is used) or other tools.