Importazione vendor css quando si utilizza WebPack + css componenti

Question

sto cercando di usare cose come font-impressionante e fondazione con reagiscono e moduli css ma non riesco a capire come importarli nel mio progetto correttamente .

Nota che sto utilizzando HotModuleReplacementPlugin e ExtractTextPlugin per ottenere un singolo file css.

Da qualche parte nel file css del componente di primo livello mi piacerebbe essere in grado di fare solo @import 'font-awesome'; ma come posso fare in modo che il file verrà trattato così com'è e le classi non finiranno localizzate per font_awesome__fa-check e così?

Questo è il mio webpack config:

var paths = { 
    app: path.join(__dirname, './app/'), 
    dist: path.join(__dirname, './dist/'), 
    external: path.join(__dirname, './node_modules/'), 
} 
module.exports = { 
    entry: { 
    site: [ 
     'webpack-dev-server/client?http://localhost:5000', 
     'webpack/hot/dev-server', 
     path.join(paths.app, '/index.js'), 
    ] 
    }, 
    output: { 
    path: paths.dist, 
    publicPath: '/', 
    filename: 'scripts/[name].[hash].js', 
    chunkFilename: '[name].[chunkhash].js' 
    }, 
    resolve: { 
    extensions: ['', '.js'], 
    root: paths.app, 
    alias: { 
     'font-awesome.css': path.join(paths.external, '/font-awesome/css/font-awesome.min.css') 
    } 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'app') 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader') 
     } 
    ] 
    }, 
    postcss: [ 
    require('autoprefixer-core'), 
    ], 
    devtool: 'inline-source-map', 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}), 
    new HtmlWebpackPlugin({ 
     template: path.join(paths.app, '/site.html'), 
     filename: 'index.html', 
     inject: 'body', 
     chunks: ['site'] 
    }), 
    ] 
}; 

Grazie.

Answer 1

Si potrebbe sfruttare inclusione/esclusione opzione durante la configurazione caricatori.

E.g. dato che tutti i vostri CSS personalizzato è da qualche parte nella directory /app/, mentre fondamento e font-impressionante non lo sono.

... 
module: { 
    loaders: [ 

     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader'), 
     include: path.join(__dirname, 'app') 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader!css-loader'), 
     exclude: path.join(__dirname, 'app') 
     } 
    ] 
}, 

Un'altra opzione è quella di usare l'estensione diversa per i file che utilizzano la sintassi CSS-moduli. Potresti usare .mcss.

... 
module: { 
    loaders: [ 
     { 
     test: /\.mcss$/, 
     loader: 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1' 
     }, 
     { 
     test: /\.css$/, 
     loader: 'css-loader') 
     } 
    ], 
    postLoaders: [ 
     { 
      test: /\.(css|mcss)$/, 
      loader: ExtractTextPlugin.extract('style-loader') 
     } 
    ] 
},