Sunday, 4 June 2017

babel es5 to es6 converting less extension to css on imports

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'); 



via Sag1v

No comments:

Post a Comment