Wie funktioniert der Stylus mit Webpack 3?

Question

Ich habe wirklich Schwierigkeiten, den Stylus CSS-Präprozessor mit einer aktuellen Version von Webpack zu arbeiten. Hier ist, was ich versucht habe:

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" 
    } 
} 

Innerhalb von /src Ich habe eine sehr einfache app.js und style.styl.

Wenn ich Webpack ausführen, wird /dist/mwe.js wie erwartet generiert, aber ich hätte auch erwartet, dass eine CSS-Datei aus der Stylus-Datei generiert wird. Was fehlt mir hier?

Answer 1

Webpack sendet keine .css Dateien, wenn Sie style-loader verwenden. Sie müssen ExtractTextPlugin verwenden, um die CSS-Datei (en) zu erhalten.

Answer 2

Wie von Panya erwähnt, müssen Sie zuerst ExtractTextPlugin installieren.

1. npm i --save-dev extract-text-webpack-plugin
2. Dann sind sie in Sie 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] 
    … 
}