Question

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

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

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

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

我使用React-Starter-Kit使用此模块vw的项目，当我尝试使用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）。

更新

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

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

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

感谢。

Answer 1

根据你的回答，我认为，进口必须是：

import Styles from './Component.css'，

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

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

1 个答案: