Repository files navigation

Converts import statements for less/css/scss into conditional requires in compiled file:

src/index.js:

import('./myStyles.less')

is converted into lib/index.js:

!!(typeofwindow!=='undefined'&&window.document&&window.document.createElement) ?require("./styles/myStyles.less") :void0;

If we run without this plugin:

babel-node src/index.js

or

babel src --out-dir libnode lib/index.js

we will get an error:

...myStyles.css:2.main {^SyntaxError: Unexpected token .

As node is trying to process less-css-scss file.So we do not want node on the server to process those files at all.

babel-plugin-transform-require-ignore will remove require statements for styles from transpiled outputso yourlib/index.js will have no mentioning of

require('myStyles.less')

But now, if you run your webpack to create client bundle from yourlib/*, your webpack style loader and ExtractTextPluginwill not find any less-css-scss files to grab and bundle.With the appoach of wrapping require to client only condition - require is still there for webpack to act on.

Install as dev dependency:

npm install --save-dev babel-plugin-client-only-require

To configure add plugin to .babelrc plugins section:

{....    "plugins": [....["client-only-require", {                "extensions": ["less", "scss", "css"]        }]    ]}