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

Question

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

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

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

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

我使用此模块 vw 使用的元素 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}`);

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

更新

我忘记说了。如果我使用相对路径语法导入该模块:

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

它按预期工作，显然有合成糖导入很好

谢谢。

Answer 1

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

从 './Component.css' 导入样式,

需要添加 .css 扩展名以表明它不是 .js 并且必须由 css-loaders(如果使用 webpack)或其他工具处理。