如何处理依赖.css文件的node_modules中的模块

Question

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

这些组件具有其正确的.css文件。源结构就是这样：

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

相同的结构已在构建文件夹中发布，每个.js文件都将用于兼容JavaScript格式的生产。

我使用react-starter-kit的项目消耗了此模块大众，当我尝试使用yarn 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}`);

我想问题是关于预告片试图读取.css文件，但是我想知道有人使用我现在正在使用的实际样板(React Starter Kit(，是否有很好的方法来避免这种问题。

update

我忘了这一点。如果我使用相对路径Sintax导入该模块：

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

它可以按预期工作，显然很高兴能进行语法糖进口

谢谢。

Answer 1

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

import Styles from './Component.css'，

有必要添加.CSS扩展名，以表明它不是.js，并且必须由CSS-Loaders处理(如果使用WebPack(或其他工具。