1

On the front page, I have a "loose" CSS file (that @imports other CSS files) that I want to act as the global CSS style to load for the site. The site itself is being revamped, but it's not quite ready to do the whole module loading system, so at the moment, there's the equivalent of an index.html that the client will hit first (and under that will be module loaded components that I'll be using webpack to transpile)

I want to be able to use webpack to take that global CSS and optimize it (via PostCSS and other plugins). But looks like webpack only likes actual javascript based entry points.

What would my strategy be to tell webpack to use the global CSS as an entry point and produce an optimized and bundled CSS consisting of all the @imported CSS in that global one.

Would I have to just run something like PostCSS separately on that file? Or load PostCSS explicitly and just run it within the webpack config (if so, what's the nicest way to make that happen?).

subdigit
  • 431
  • 4
  • 9
  • It's similar to this question: http://stackoverflow.com/q/38615076/223362 just instead of Less, I'll be using PostCSS to "compile" the CSS into something normal. I think we both just want to leverage the environment of webpack, but not have to be tied to the .js entry point system. – subdigit Apr 18 '17 at 00:14

1 Answers1

0

For now, I'm using the JS API sample from the PostCSS website in order to use it as the base to read in my global CSS and transpile it down to normal CSS to include in the front page.

(From the JS API sample)

const fs = require('fs');
const postcss = require('postcss');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

fs.readFile('src/app.css', (err, css) => {
    postcss([precss, autoprefixer])
        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
        .then(result => {
            fs.writeFile('dest/app.css', result.css);
            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
        });
});
subdigit
  • 431
  • 4
  • 9
  • I refuse to accept my own answer as there really should be something that feels a little more formal. I guess I _could_ turn this into a plugin, or perhaps there already is one that does it. (There is one to execute shell commands: https://www.npmjs.com/package/webpack-shell-plugin) – subdigit Apr 20 '17 at 16:29