如何让 Stylus 与 Webpack 3 一起工作？答案

【问题标题】：How to get Stylus working with Webpack 3?如何让 Stylus 与 Webpack 3 一起工作？
【发布时间】：2018-04-09 13:42:55
【问题描述】：

我真的很难让 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 会按预期生成，但我也希望从 Stylus 文件生成一个 CSS 文件。我在这里错过了什么？

【问题讨论】：

标签： webpack stylus webpack-style-loader

【解决方案1】：

正如Panya所说，您需要先安装ExtractTextPlugin。

npm i --save-dev extract-text-webpack-plugin
然后将其包含在你的 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]
  …
}

【讨论】：

我没有尝试将 .styl 文件直接提取/转换为 css 文件。我正在尝试将其导入 .scss 文件。例如。 @import 'sprite.styl'; 我该怎么做？我正在使用 Webpack 4....
你需要添加一个sass-loader 而你不需要插件，因此这是一个完全不同的任务。您想提出一个新问题并将其链接到评论中吗？

【解决方案2】：

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

【讨论】：