Given style.css:

/* style.css */
.foo {
  color: #f00;
}

Can you run the following in Node.js?

// entry.js
require('./style.css');

No, you can’t.

But what you can do is build a browser bundle with webpack.

Webpack

Install webpack if you haven’t already:

$ npm install [email protected] --global

Or you can install a local version of webpack and use the local binary:

$ npm install webpack
# ./node_modules/.bin/webpack

Loader

The css-loader comes handy here:

$ npm install css-loader

Create your webpack configuration:

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader'
      }
    ]
  }
};

Use the webpack CLI to build the output:

$ webpack entry.js output.js

Hash: 450179c0dbbc679bc68a
Version: webpack 1.13.2
Time: 345ms
    Asset    Size  Chunks             Chunk Names
output.js  3.3 kB       0  [emitted]  main
   [0] ./entry.js 36 bytes {0} [built]
    + 2 hidden modules

The exports of style.css is an array with the method .toString():

// entry.js
var style = require('./style.css');
console.log(style); // [ Array[3] ]
console.log(style.toString()); // css string

Style

But how would load the styles to your document?

One approach is to insert it with JavaScript:

// entry.js
var css = require('./style.css').toString();
var style = document.createElement('style');
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);

Another approach is to use style-loader:

$ npm install style-loader

Now add the loader to your webpack config:

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        // chained loaders are applied right to left
        loaders: ['style-loader', 'css-loader']
        // an alternative syntax:
        // loader: 'style-loader!css-loader'
      }
    ]
  }
};

Plugin

What if you have multiple .css files and you want to combine them into a single stylesheet?

Here, you’ll want to use extract-text-webpack-plugin.

Install both the plugin and webpack locally (if you haven’t already):

$ npm install extract-text-webpack-plugin [email protected]

Now update your webpack configuration:

// webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        // extract styles
        loader: ExtractTextPlugin.extract('css-loader')
      }
    ]
  },
  plugins: [
    // create CSS file named `output.css`
    new ExtractTextPlugin('output.css', {
      allChunks: true
    })
  ]
};

Webpack will generate a JavaScript bundle as well as a CSS bundle:

$ webpack entry.js output.js

Hash: ca4a8ab3e0b1963e60de
Version: webpack 1.13.2
Time: 370ms
     Asset      Size  Chunks             Chunk Names
 output.js   1.66 kB       0  [emitted]  main
output.css  42 bytes       0  [emitted]  main
   [0] ./entry.js 150 bytes {0} [built]
    + 1 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules