Babel Browser Only

Importing files only for browser. The idea is from http://stackoverflow.com/a/30355080.

TL;DR

This plugin makes you import CSS files in Isomorphic React App!

Example

In

import './css/test.css';
import './css/test.scss';
require('./css/test.sass');
require('./css/test.less');

import React, { Component } from 'react';
class ScheduleList extends Component {
  ...
}

Out

process.env.BROWSER && require('./css/test.css');
process.env.BROWSER && require('./css/test.scss');
process.env.BROWSER && require('./css/test.sass');
process.env.BROWSER && require('./css/test.less');

import React, { Component } from 'react';
class ScheduleList extends Component {
  ...
}

Usage

For Webpack

{
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BROWSER: JSON.stringify(true)
      }
    })
  ]
}

For Babel

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["babel-browser-only"]
}

With Options

{
  "plugins": ["babel-browser-only", {
    "disregard": [".css", ".scss", ".sass", ".less"] // default
  }]
}

Via CLI

$ babel --plugins babel-browser-only script.js

Via Node API

import { transform } from 'babel-core';
transform('code', {
  plugins: ['babel-browser-only']
});

Installation

npm install --save-dev babel-browser-only

License

MIT license.