From fed0066ca527ed8c1b8a416980bede23975f56ec Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Wed, 23 Nov 2016 19:22:49 +0100 Subject: [PATCH] Use proper loaders for external module's CSS. (#157) - react-toolbox requires its own setup with sass-loader for now - redux-notifications doen's need to use css-modules - exclude `node_modules` from our own CSS pipeline Realted to bcca98b1951d03e0850b353e9c16fd8b1db2291f --- webpack.base.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/webpack.base.js b/webpack.base.js index 8f906c19..f55cb19c 100644 --- a/webpack.base.js +++ b/webpack.base.js @@ -6,6 +6,31 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ + { + loader: 'babel', + test: /\.js?$/, + exclude: /node_modules/, + }, + { + /* CSS loader for npm modules that are shipped with CSS. + List all of theme in the array + */ + test: /\.css$/, + include: [/redux-notifications/], + loader: ExtractTextPlugin.extract('style', 'css'), + }, + { + /* React-toolbox still relies on SCSS and css-modules */ + test: /\.scss$/, + include: [/react-toolbox/], + loader: ExtractTextPlugin.extract('style', 'css?modules!sass'), + }, + { + /* We use CSS-modules and PostCSS for CMS styles */ + test: /\.css$/, + exclude: /node_modules/, + loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&&localIdentName=cms__[name]__[local]!postcss'), + }, { test: /\.(png|eot|woff|woff2|ttf|svg|gif)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000', @@ -14,19 +39,6 @@ module.exports = { test: /\.json$/, loader: 'json-loader', }, - { - test: /\.scss$/, - loader: ExtractTextPlugin.extract('style', 'css?modules!sass'), - }, - { - test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&&localIdentName=cms__[name]__[local]!postcss'), - }, - { - loader: 'babel', - test: /\.js?$/, - exclude: /node_modules/, - }, ], }, postcss: [