Webpack 3でスタイラスを使用するには？

Question

私は現在のバージョンのWebpackで動作するStylus CSSプリプロセッサを手に入れようと苦労しています。ここで私が試みられてきたものだ：

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：私はapp.jsとstyle.styl非常に単純なを持っている

{ 
    ... 
    "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の内部。

Webpackを実行すると、/dist/mwe.jsが期待通りに生成されますが、StylusファイルからCSSファイルが生成されることも予想されます。私はここで何が欠けていますか？

Answer 1

style-loaderを使用している場合、Webpackは.cssファイルを出力しません。 CSSファイルを取得するには、ExtractTextPluginを使用する必要があります。

Answer 2

Panyaが述べたように、まずExtractTextPluginをインストールする必要があります。

1. npm i --save-dev extract-text-webpack-plugin
2. 次にあなたが

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] 
    … 
} 

をwebpack.config.js に含めます