用Javascript编译的文件导入CSS而不是CSS

Question

I am distributing some compiled files, which means from this tree

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

I compiled to this tree:

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

The problem I have is that babel does not change the extension of the required style files to css. In my Button/index.jsx file I import the style like this:

import './button.scss'

This means in my compiled javascript file I still find

require('./button.scss');

while obviously this file is not present in the new tree, because the extension is now css. Is there a babel way to change the imports name/extentions and is this even recommendable? At what time of the compilation should this happen?

Answer 1

Hope you wrote your JSX file like this :

src/index.jsx:

import styles from './button.scss' or require("./button.scss")

and the transpiled js file under lib

lib/index.js:

import styles from './button.scss' or require("./button.scss")

and your transpiling those JSX files by using babel cli, is that right ?

You can achieve this by following steps:

Step 1 :

Include all .scss under main.scss file like below:

main.scss

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

and placed it as

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

in your html. Make a common/global css style guide for all components.

Step 2:

if your not intended to use webpack, you can simply place dest css location

import styles from './button.css'

in src/JSX itself.

Step 3:

Using webpack the best way to go about this would probably to use a loader chain such as style!css!sass for your .scss imports which would allow you to simply import and use the styles within your React components in the following manner:

import styles from './button.scss';

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

I'll be ready to adapt if anything better than this approach.

read more at : react-sass-babel-webpack