使用 Webpack 和 stylus 创建静态 css答案

【问题标题】：Using Webpack and stylus to create static css使用 Webpack 和 stylus 创建静态 css
【发布时间】：2016-09-04 22:01:40
【问题描述】：

Webpack 新手。我正在考虑将我的应用程序的 JS 部分迁移到它。但是，我不喜欢它处理 CSS 的方式。想保持简单并自行链接它们。不幸的是，文档并不是很有帮助，搜索结果也是如此。

那么，我到底需要什么？

从大量 .styl 文件到静态 .css 的手写笔编译。
会有三个静态样式表文件（入口点？），但与应用程序的 JS 部分的入口点完全不同。
还有一些“监视”功能，当源 .styl 文件之一发生更改时，它会编译 css。

有没有人可以指出我正确的方向，也许写一个配置？这甚至可以使用 Webpack 还是我应该继续使用 Grunt？

感谢您提供任何有用的答案。

【问题讨论】：

我有a tip on that，只要到处用Stylus替换SCSS。 Watch 带有 Webpack（参见 docs）。请先做自己的研究。
对不起 Rishat，但这实际上并没有帮助，我需要生成静态 css，而不是 css 模块。

标签： javascript gruntjs webpack stylus

【解决方案1】：

要了解更多关于 Webpack 的详细信息，您可以参考这本在线书籍SurviveJS - Webpack，它将引导您了解与 Webpack 相关的大部分概念。要完成您的需要，您可以从在项目的根目录中创建 webpack.config.js 开始，它可以是这样的：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = { 
    entry: './entry.js', // you application entry point
    output: {
        filename: 'bundle.js', // resulting bundle file
        path: './public' // the output folder path
    },
    module: {
        loaders: [
            {
                test: /\.styl$/,
                loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css') // output css bundle
    ]
};

然后需要你的手写笔文件entry.js文件require('./style.styl');

别忘了安装所需的加载器和插件

npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin

【讨论】：