Compiling Stylus with Webpack 4 without importing it into a JS file?

Question

Something like this:

var stylusCompiler = {
    name: 'stylus',
    entry: {
        above_fold: './src/css/above_fold.styl',
        site: './src/css/site.styl'
    },
    output: {
        path: path.resolve(__dirname, 'dist/css'),
        filename: '[name].bundled.css'
    },
    module: {
        rules: [
            {
                test: /\.styl$/,
                use: [
                    {
                        loader: "stylus-loader", // compiles Stylus to CSS
                        options: {
                            use: [
                                require('nib')(),
                                require('rupture')()
                            ]
                        }
                    }
                ]
            },
        ]
    }
};

Doesn't work because it seems to be expecting JS, so gives syntax errors for any css it encounters. It is parsing the stylus, because the error shows the compiled CSS.

Answer 1

Webpack by default doesn't support entry types other than JavaScript. It's mentioned in their v4 release that HTML and other file types will be supported in v4.x and v5.x, in future releases.

You can instead use MiniCssExtractPlugin that will extract your styles from the JavaScript bundle and name them accordingly. See this Medium post about it, a bit outdated but still delivers the idea.