CODEWITHSUNDEEP
webpackstyluswebpack-4stylus-loader
Joren
Joren

Reputation: 9915

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

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.

Upvotes: 2

Views: 1189

Answers (1)

CumulativeDestruction
CumulativeDestruction

Reputation: 86

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.

Upvotes: 1

Related Questions