在不将 Stylus 导入 JS 文件的情况下使用 Webpack 4 编译 Stylus？

Question

像这样：

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')()
                            ]
                        }
                    }
                ]
            },
        ]
    }
};

不起作用，因为它似乎需要 JS，因此遇到任何 css 都会给出语法错误。是解析stylus，因为报错显示编译的CSS.

Answer 1

Webpack 默认不支持 JavaScript 以外的条目类型。在他们的 v4 版本中提到 HTML 和其他文件类型将在 v4.x 和 v5.x 中得到支持，在未来的版本中。

您可以改用 MiniCssExtractPlugin that will extract your styles from the JavaScript bundle and name them accordingly. See this Medium post，有点过时但仍然传达了这个想法。

在不将 Stylus 导入 JS 文件的情况下使用 Webpack 4 编译 Stylus？

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

stylus

webpack

webpack-4

stylus-loader