Как скомпилировать скомпилированный набор Stylus в html-файл, используя HtmlWebpackPlugin?

Question

Мне нужно ввести пакет Stylus в файл html в файле конфигурации webpack.

Я уже ввел пакет js с помощью HtmlWebpackPlugin, и я подумал, что с помощью этого плагина можно также скомпилировать скомпилированный набор стилусов.

Ниже мой текущий webpack.config.js файл:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var HtmlWebpackPluginConfigForJS = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 
var HtmlWebpackPluginConfigForStyles = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.styl', 
    inject: 'head' 
}); 

module.exports = { 
    entry: [ 
     'babel-polyfill', 
     './app/index.js' 
    ], 
    output: { 
     path: __dirname + '/dist', 
     filename: 'index_bundle.js' 
    }, 
    devtool: 'source-map', 
    cache: true, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.styl$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'style-loader!css-loader!stylus-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     HtmlWebpackPluginConfigForJS, 
     HtmlWebpackPluginConfigForStyles 
    ], 
    stylus: { 
     use: [require('nib')(), require('rupture')()], 
     import: ['~nib/lib/nib/index.styl', '~rupture/rupture/index.styl'] 
    } 
} 

Единственный способ, которым я получил работу стилей, чтобы добавить require('./index.styl); в моем файле JavaScript, но это не то, что мне нужно.

HtmlWebpackPluginConfigForJS работает нормально и успешно вводит файл index_bundle.js в мой index.html. Но это не работает со стилями.

---

Не могли бы вы помочь мне улучшить мою конфигурацию webpack, чтобы он правильно ввел мой пучок стилусов?

Answer 1

По умолчанию HtmlWebpackPlugin впрыскивает css файлов, из документации:

Если у вас есть какие-Css активы в выходе WebPack (например, CSS, извлеченный с ExtractTextPlugin), то они будут включены с тэгами в HTML глава.

Таким образом, вы можете использовать ExtractTextPlugin, чтобы извлечь все свои стили в один или несколько файлов. Но для извлечения вам необходимо указать index.styl в вашем основном index.js, чтобы загрузчик мог видеть и производить извлечение.