Importation css fournisseur lors de l'utilisation des composants de webpack + css

Question

Je suis en train d'utiliser des choses comme font-impressionnant et Fondation avec REACT et modules css, mais je ne peux pas comprendre comment les importer dans mon projet correctement .

Notez que j'utilise HotModuleReplacementPlugin et ExtractTextPlugin pour obtenir un seul fichier css.

Quelque part dans le fichier css du composant de niveau supérieur, j'aimerais pouvoir faire @import 'font-awesome'; mais comment puis-je faire pour que le fichier soit traité tel quel et que les classes ne soient pas localisées font_awesome__fa-check et autres?

Voici ma config webpack:

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'] 
    }), 
    ] 
}; 

Merci.

Answer 1

Vous pouvez tirer parti de l'option include/exclude lors de la configuration des chargeurs.

E.g. étant donné que tout votre CSS personnalisé est quelque part dans le répertoire /app/, alors que foundation et font-awesome ne le sont pas.

... 
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') 
     } 
    ] 
}, 

Une autre option consiste à utiliser une extension différente pour les fichiers qui utilisent la syntaxe css-modules. Vous pouvez utiliser .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') 
     } 
    ] 
},