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

Question

我正在一个项目中，其中某些依赖项是一个自制的UI库组件。

这些组件具有正确的.css文件。 源代码结构如下所示：

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

相同的结构发布在build文件夹中，每个.js文件都被转换为与生产兼容的JavaScript格式。

我使用React-Starter-Kit使用此模块vw的项目，当我尝试使用yarn start或npm start服务npm start ，出现以下错误：

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}`);

我想这个问题与babel试图读取.css文件有关，但是我想知道是否有人使用我现在正在使用的实际样板来避免此类问题（React Starter Kit）。

更新

我忘了提这个。 如果我使用相对路径sintax导入该模块：

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

它按预期工作，可以很方便地导入合成糖

谢谢。

Answer 1

根据您的回答，我认为导入必须是：

import Styles from './Component.css' ，

有必要添加.css扩展名以表明它不是.js，并且必须由css-loaders（如果使用webpack的话）或其他工具进行处理。