Merge pull request #247 from israelshmueli/compile-multiple-css-files

Configure webpack to compile multiple css files

webpack/plugins.js

@@ -10,7 +10,7 @@ const glob = require('glob');
 const imagePath = path.resolve(__dirname, '../images');
 
 const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
-  filename: 'style.css',
+  filename: '[name].css',
   chunkFilename: '[id].css',
 });
 
@@ -35,7 +35,15 @@ module.exports = {
   ImageminPlugin,
   SpriteLoaderPlugin,
   CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
     cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
-    cleanAfterEveryBuildPatterns: ['remove/**', '!js', '!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      'css/style.*', // Remove duplicated dist/css/style.css and its css.map
+      '!*.{png,jpg,gif,svg}',
+    ],
   }),
 };

webpack/webpack.common.js

@@ -7,17 +7,36 @@ const webpackDir = path.resolve(__dirname);
 const rootDir = path.resolve(__dirname, '..');
 const distDir = path.resolve(rootDir, 'dist');
 
-function getEntries(pattern) {
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssPattern, jsPattern) {
   const entries = {};
 
-  glob.sync(pattern).forEach((file) => {
+  // SCSS entries
+  glob.sync(scssPattern).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsPattern).forEach((file) => {
     const filePath = file.split('components/')[1];
     const newfilePath = `js/${filePath.replace('.js', '')}`;
     entries[newfilePath] = file;
   });
 
   entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
-  entries.css = path.resolve(webpackDir, 'css.js');
+  // entries.css must renamed into entries.style in order to keep style.css file name.
+  // Since each css file in derives its name from own entries.property name.
+  entries.style = path.resolve(webpackDir, 'css.js');
 
   return entries;
 }
@@ -26,12 +45,7 @@ module.exports = {
   stats: {
     errorDetails: true,
   },
-  entry: getEntries(
-    path.resolve(
-      rootDir,
-      'components/**/!(*.stories|*.component|*.min|*.test).js',
-    ),
-  ),
+  entry: getEntries(scssPattern, jsPattern),
   module: {
     rules: [
       loaders.CSSLoader,