Question

我正在分发一些编译文件，这意味着来自这个树

- src
  - components
    - Button
      - index.jsx
      - button.scss

我编译到这棵树：

- lib
  - components
    - Button
      - index.js
      - button.css

我遇到的问题是babel没有将所需样式文件的扩展名更改为css。在我的Button/index.jsx文件中，我导入了这样的样式：

import './button.scss'

这意味着在我编译的javascript文件中我仍然可以找到

require('./button.scss');

显然这个文件在新树中不存在，因为扩展名现在是css。是否有改变进口名称/扩展的babel方式，这是否可以推荐？编译的时间应该发生吗？

Answer 1

希望你写这样的JSX文件：

<强>的src / index.jsx：

从'./button.scss'或require（“./ button.scss”）导入样式

和lib下的转换后的js文件

<强> LIB / index.js：

从'./button.scss'或require（“./ button.scss”）导入样式

你使用babel cli转发那些JSX文件，是吗？

您可以通过以下步骤实现此目的：

第1步：

在main.scss文件下包含所有.scss，如下所示：

main.scss

.my-component {  
  @import 'utils/all';
  @import 'base/all';
  @import 'components/all';
}

并将其设为

<link rel="stylesheet" href="dist/stylesheets/main.css">

你的HTML中的

。为所有组件制作通用/全局css样式指南。

第2步：

如果你不打算使用webpack，你可以简单地放置dest css location

import styles from './button.css'

在src / JSX中。

第3步：

使用webpack最好的办法是使用加载链例如 style！css！sass 用于.scss导入，这样您就可以简单地导入和使用其中的样式您的React组件采用以下方式：

import styles from './button.scss';

export default props => <button className={styles.button} />

如果有任何比这种方法更好的话，我会做好准备。