如何让Stylus与Webpack 3合作？

Question

我真的很难让Stylus CSS预处理器与当前版本的Webpack一起工作。这是我尝试过的：

webpack.config.js：

var path = require("path");
module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'mwe.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: /src/
            },
            {
              test: /\.styl$/,
              include: /src/,
              use: [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                  }
                },
                'stylus-loader'
              ],
            },
        ]
    }
};

package.json：

{
  ...
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "webpack": "^3.8.1"
  }
}

在/src内部，我有一个非常简单的app.js和style.styl。

当我运行Webpack时，/dist/mwe.js会像预期的那样生成，但我也希望从手写笔文件生成一个CSS文件。这里我漏掉了什么？

Answer 1

如果您使用的是style-loader，则Webpack不会发出.css文件。您需要使用ExtractTextPlugin来获取CSS文件。

Answer 2

正如Panya所提到的，您需要首先安装ExtractTextPlugin。

将其包含在

1. npm i --save-dev extract-text-webpack-plugin
2. Then webpack.config.js

中

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
  filename: '../css/style.css',
  allChunks: true,
});

const config = {
  …
  module: {
    rules: [
      {
        test: /\.(css|styl)$/,
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader', 
              options: {importLoaders: 1, sourceMap: true}
            },
            {
              loader: 'stylus-loader',
              options: { sourceMap: true },
            },
          ]
        })
      }
    ]
  },
  plugins: [extractPlugin]
  …
}