babel es5到es6在导入时将较少的扩展名转换为CSS

Question

I wrote some npm scripts that builds the ./lib directory before publish to npm.
1. script is responsible to convert all es6 *.js files in ./src/components/ to es5 syntax and then copy the files to ./lib (same structure).
This is the script:

"cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files"

And this is the .babelrc file:

{
  "presets": [
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "latest",
        "react-hmre"
      ]
    },
    "production": {
      "presets": [
        [
          "latest",
          "es2015"
        ]
      ],
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        [
          "transform-imports",
          {
            "react-bootstrap": {
              "transform": "react-bootstrap/lib/${member}",
              "preventFullImport": true
            },
            "lodash": {
              "transform": "lodash/${member}",
              "preventFullImport": true
            }
          }
        ]
      ]
    },
    "test": {
      "presets": [
        "latest"
      ]
    }
  }
}

I have another script that responsible to convert .less files to .css and copy them to ./lib (same structure):

"lessc-glob ./src/components/**/*.less lib"

Everything works well as expected, but i have one problem now. The import that i have inside the .js files are referring to .less files, but i need it to change to .css extensions.
To make things clear,
What i have now is:

import css from './styles.less';

Converted into this:

var _styles = require('./styles.less'); 

But i want it to convert to this:

var _styles = require('./styles.css'); 

Answer 1

replace can be installed and utilized to find instances of .less and replace them with .css in your resultant ES5 .js file/s.

npm script

Add a replace script to your package.json as follows:

...
"scripts": {
  ...
  "replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
},
...

A call to the replace script can then be chained to the end your script that is responsible for converting all es6 *.js files. Eg

...
"scripts": {
  ...
  "quux": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files && npm run replace",
  "replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
  ...
},
...

Note the && npm run replace part added to the end of your current quux script.

I've assumed the components folder is copied to the lib folder too. If it's not then the ./lib/components/ part in the replace script will need to be changed to ./lib/ .