How to load styles in webpack from the right folder?

Question

webpack

Conditionally, I have default styles written, and I need to include overloaded styles
. That is, conditionally, I have a main page component
/* main.js */

import './style.css';

class Main {

}

But I need to do some other assembly using my own key:
$ webpack -какой_то_ключ override
And then webpack will automatically understand what I need
/* main.js */

import './style.override.css';

class Main {

}

How can this be done?
webpack.config.js

module.exports = {

  context: __dirname, // точка входа в приложение

  entry: { // точки входа
    core: './angular/vendor.js',
    app: './angular/app.module.js'
  },

  output: { // выходные файлы
    path: '../webapp/js/',
    publicPath: '/js/',
    filename: '[name].js',
    library: '[name]'
  },

  watchOptions: {
    aggregateTimeout: 100
  },


  module: {

    loaders: [
        { // используем ES6 to ES5
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015'],
            compact : false
          }
        },
        {
            test: /\.html$/,
            loader: 'html'
          },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader!'
        },
        {
          test: /\.scss$/,
          loaders: ['style', 'css', 'sass?sourceMap']
        },


        
    ]
  },


};

Answer 1

You can add synonyms ( alias ):

module.exports = {
  resolve: {
    alias: {
       // имя синонима: путь
       'style': path.join(__dirname, 'style.override.css'),
       'любоеУдобноеИмяСинонима': path.join(__dirname, 'путь к модулю'),
       'любоеУдобноеИмяСинонима2': 'илиТакЕслиВкорне',
    }
  }
}

And use synonyms in code:

import 'style';
import 'любоеУдобноеИмяСинонима';
require('любоеУдобноеИмяСинонима2');

You can add any functionality to webpack.config.js to get paths to synonyms, and in general, you can do anything you want:

var suffix = '.override';

module.exports = {
  resolve: {
    alias: {
       'style': path.join(__dirname, 'style' + suffix + '.css'),
    }
  }
}

As for passing user variables through the command line, you can try to specify them through SET (if under Windows ). There will be something like this:
You can find variables in process.env . To print variables to the console, add the following line of code to the webpack.config.js file:

console.log('process.env', process.env);
console.log('ANY_NAME', process.env.ANY_NAME);