使用Webpack 4编译手写笔而不将其导入JS文件?

时间:2019-01-11 01:55:40

标签: webpack stylus webpack-4 stylus-loader

类似这样的东西:

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提供语法错误。它正在分析手写笔,因为错误显示了已编译的CSS。

1 个答案:

答案 0 :(得分:1)

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

您可以改而使用MiniCssExtractPlugin来从JavaScript包中提取样式并相应地命名。看到有关此Medium post的信息,虽然有些过时,但仍然可以实现。