Concatenate Multiple CSS Files into One

Concatenate multiple CSS files into one

As long as the ordering of the arguments for cat matches the original ordering of the three referenced CSS files in the HTML file the cat-method should work as expected.

So given say ..

<link href="css/one.css" rel="stylesheet" type="text/css" media="all">
<link href="css/two.css" rel="stylesheet" type="text/css" media="all">
<link href="css/three.css" rel="stylesheet" type="text/css" media="all">

.. the following concaternation ..

cat css/one.css css/two.css css/three.css > css/all.css

.. together will the following reference ..

<link href="css/all.css" rel="stylesheet" type="text/css" media="all">

.. should be 100 % identical.

How to merge and clean 2 css files with overlapping selectors/properties?

There is This and This list of other helpful tools

Merge multiple scss files into one css file

You indicated that you want to merge your files into one file and compress that file, so you need to add two plugins to do each of those.

Gulp-concat and gulp-uglify

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(concat('styles.css'))
  .pipe(uglify())

  // .pipe(rename({
   //  basename: "styles",
   //   suffix: ".min",
   //   extname: ".css"
  //  }))

  .pipe(gulp.dest('css'))
});

In addition, you may want to add gulp-rename to indicate that the file has been uglified/minified via a .min.css extension (and change your html link to point to that filename).

Parcel outputs multiple CSS files

You can use the @import at-rule to combine multiple css files into a single bundle (see documentation).

For example, you could have an index.css with this content:

@import "a.css";
@import "b.css";

...and then reference index.css in your index.html file:

<html>
  <head>
     <link rel="stylesheet" href="./index.css">
 </head>
</html>

See this example repo.

Edit:

Another way to achieve this goal, if your app uses javascript, is to do the css imports from a javascript file. So your html file would look like this:

<html>
  <head>
     <script src="./index.js" type="module"></script>
 </head>
</html>

...and your index.js file would look like this:

import "./a.css";
import "./b.css";
// The rest of your app...

Webpack concatenate two CSS files and an SCSS file into one CSS file

There are several issues with this config.

modulesDirectories should be an array of directory names that will be resolved like node_modules (that is: traversing the directory tree and looking for a node_modules folder). Do not put actual paths in this array. This is one of the most common errors I see in webpack configs. Since npm is the most prominent package manager, you usually don't need to set this option as it already defaults to node_modules.
The named chunk myProjectLunchMenusAdmin references CSS files, but you did not activate the css-loader for the .css extension. That's basically what the Module parse failed error is trying to say.
The named chunk myProjectLunchMenusAdmin references the glob pattern node_modules/quill/dist/*.css. Webpack does not understand glob patterns. In your case, it tries to include a file actually named *.css which is what the Module not found error is trying to tell. You need to pass webpack only one file and webpack will figure out the dependency graph. For example: If file main.css imports some-other-file.css, it will include that file too and so on. By doing that, webpack will only include files that are actually needed because they are referenced in your program. (Btw: node_modules/node_modules does not look correct)
Using a relative path for the first argument of the ExtractTextPlugin is probably invalid. I don't know if that actually works. You should just give a filename and webpack will emit the extracted and unified CSS into a file with that name in the specified output.path. The output.path is usually a flat folder without sub-directories. If you need to move the bundled files around afterwards, you should separate that from your webpack build. That's just another build step.
resolveLoader.root does not need to be modified as long as you're installing your loaders via npm (which I strongly recommend).

I've tried to fix the given config. Since I don't know your project, there is not guarantee that this will work.

'use strict';

let webpack = require('webpack');

let path = require('path');
let nodeModulesPath = path.join(__dirname, 'node_modules');

//Process the SCSS
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css',{allChunks: true});
let isDev = process.env.NODE_ENV !== 'production';

var definePlugin = new webpack.DefinePlugin({
    __DEV__: isDev
});

module.exports = {
    resolve: {
        alias: {
            rootReducers: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-reducers'),
            rootActions: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-actions'),
            rootUtils: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-utils'),
            lunchMenusReducers: path.join(__dirname, 'src/lunch-menus-common-js/reducers/lunch-menus-reducers'),
            lunchMenusActions: path.join(__dirname, 'src/lunch-menus-common-js/actions/lunch-menus-actions'),
            lunchMenusConfigureStore: path.join(__dirname, 'src/lunch-menus-common-js/configureStore')
        }
    },
    entry: {
        backend: path.join(__dirname, 'src/components/index.js'),
        widgetfrontend: path.join(__dirname, '../../../includes/widget/public-js/scripts/main.js'),
        widgetbackend: path.join(__dirname, '../../../includes/widget/js/scripts/main.js'),
        myProjectLunchMenusAdmin: [
            path.join(__dirname, '../../scss/myProject-lunch-menus-admin.scss'),
            path.join(nodeModulesPath, 'react-datepicker/dist/react-datepicker.min.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.base.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.snow.css')
        ]
    },
    output: {
        path: path.resolve(__dirname, '..'),
        filename: '[name].js',
        devtoolLineToLine: true
    },
    plugins: [
        extractCSS,
        definePlugin
    ].concat(isDev ? [

    ] : [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]),
    module: {
        loaders: [
            {
                test: /(src|myProject-base|widget)\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-react'),
                        require.resolve('babel-preset-stage-0')
                    ]
                }
            },
            {
                test: /\.css$/i,
                loader: extractCSS.extract(['css'])
            },
            {
                test: /\.scss$/i,
                loader: extractCSS.extract(['css','sass'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
                loader: 'file'
            }
        ]
    }
}

Concatenate Multiple CSS Files into One