split-css-loader
is a webpack loader that allows conditional compilation of CSS via media queries. For example, you can have split styling for a "desktop" and "xbox" build:
{} {} {}
Usage
Your webpack.config.js
might look something like this:
moduleexports = // ... module: preLoaders: test: /\.css$/ loader: 'split-css?target=platform&value=xbox' loaders: test: /\.css$/ loader: 'style!css' ;
The loader takes two parameters, the target
specifying the media query key you want to compile against, and the value
you want that key to be. In this case, we specified that we only want to compiled @media (platform: xbox)
and want everything else to be stripped out.
Programmatic API
You can also use this module natively, in Node. The options are the same, you simply pass in a CSS string you want to parse:
const split = ; fs;