Webpack und extern (Hersteller) .css

Question

Ich bringe langsam Webpack in ein bestehendes Projekt. An dieser Stelle werden wir keine require .css-Dateien. Ich möchte jedoch, dass Webpack sie weiterhin verarbeitet.

Ich möchte, dass Webpack nur die Datei lädt, übergeben Sie es an, was. CCD-Ladeprogramm erforderlich ist (Stylus in unserem Fall), und eine .css-Datei ausgeben.

Keine der Kombinationen von ExtractTextPlugin, roh und Dateilader, Radlader vorbei in andere Lader arbeiten, Webpack wirft unweigerlich

Module build failed: ParseError: ...bootstrap-theme.min.css:5:1996 
    1| /*! 
    2| * Bootstrap v3.3.5 (http://getbootstrap.com) 
    3| * Copyright 2011-2015 Twitter, Inc. 
... 
expected "indent", got ";" 

Ist es sogar möglich, externe Dateien mit Webpack so zu verarbeiten?

Verschiedene Kombinationen versucht:

{ 
    test: /\.(styl|css)/, 
    loader: 'raw!stylus' 
    } 

    { 
    test: /\.(styl|css)/, 
    loader: 'file!stylus' 
    } 


    { 
    test: /\.(styl|css)/, 
    loader: ExtractTextPlugin.extract('file', 'raw!stylus') 
    } 


    { 
    test: /\.(styl|css)/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader') 
    } 

Answer 1

Sie brauchen nicht Ihre CSS-Dateien durch den Griffel loader passieren, nur die .styl Dateien.

Ich habe es geschafft, um es mit dieser Konfiguration funktioniert:

module.exports = { 
    entry: { 
    name: './test.js' 
    }, 
    output: { 
    filename: './bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css'] 
     }, 
     { 
     test: /\.styl$/, 
     loaders: ['style', 'css', 'stylus'] 
     }, 
     { 
     test:/\.(woff2?|eot|ttf|svg)$/, 
     loader: 'url' 
     } 
    ] 
    } 
} 

Und dann können Sie/importieren Sie Ihre CSS-Dateien als solche erfordern:

require('./test.css'); 
require('./node_modules/bootstrap/dist/css/bootstrap.min.css');