Как в webpack сделать так, чтобы стили подгружались из нужной папки?

Question

[Максим Иванов]

Условно, у меня написаны дефолтные стили, а мне нужно подключать перегруженные стили

То есть, условно у меня есть компонент главной страницы

/* main.js */

import './style.css';

class Main {

}

Но мне нужно делать какую-то другую сборку по собственному ключу:
$ webpack -какой_то_ключ override

И тогда у меня автоматически поймет webpack, что нужно
/* main.js */

import './style.override.css';

class Main {

}

Как такое можно сделать?

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

[Алексей Немиро]

Вы можете добавить синонимы (alias):

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

И использовать синонимы в коде:

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

В webpack.config.js можно добавить любой функционал для получения путей к синонимам, да и в целом можно все что угодно сделать:

var suffix = '.override';

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

Что касается передачи пользовательских переменных через командную строку, то можно попробовать их указывать через SET (если под Windows). Будет что-то типа этого:

SET ANY_NAME="VALUE" && webpack -d --color

Найти переменные можно в process.env. Чтобы сделать вывод переменных в консоль, добавьте в файл webpack.config.js следующую строчку кода:

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

Comments

[Максим Иванов]

очень круто)

[Максим Иванов]

'style': path.join(__dirname, 'style' + suffix + '.css')

будет работать только относительно текущей директории

а если мне нужно импортировать в каждой папке компонента, свою собственную тему?

[Алексей Немиро]

Максим Иванов: если нужен разный набор стилей, то придется его перечислять:

'стилиДляКомпонента': path.join(__dirname, 'путь/к/файлу.css'),
'стилиДляКомпонента2': 'путь/к/файлу.css',
'стилиДляКомпонента3': 'имяФайла',

Можно усложнить и написать код, который будет генерировать синонимы на основе структуры файлов. Примерно так:

var alias = {};
var fs = require('fs');
var files = fs.readdirSync(path.join(__dirname, 'какуюПапкуЧитаем'));
for (var i in files) {
  alias['придуматьСхемуФормированияСинонимов'] = files[i];
}

Потом просто передать значение переменной alias в module.exports.resolve.alias.
Но это слишком сложное решение.

Можно все что угодно сделать. В идеале, найти максимально простое решение.

Например, в корне компонента может находиться дополнительный файл конфигурации, который можно прочитать из webpack.config.js и понять, как обрабатывать данный компонент.

Можно сделать собственный loader, который будет каким-то образом выбирать, какую тему использовать для компонента: https://webpack.github.io/docs/how-to-write-a-load...

Answer 2

[qtuz]

Для подобных ситуаций обычно используют environment-переменные. В Webpack из коробки есть плагин, который позволяет определить глобальные константы и пробросить их в код. Значение этих констант считывается из аргументов командной строки определённых при вызове webpack:

$ NODE_ENV=development|production|your_value webpack

webpack.config.js

var webpack = require('webpack');
var env = process.env.NODE_ENV || 'development'; // получаем значение из env-переменной
...
module.exports = {
  plugins: [
    new webpack.DefinePlugin({ENV: JSON.stringify(env)})
  ]
}

main.js

if (ENV === 'development') {
  require('./style.css');
} else {
  require('./style.override.css');
}

class Main {

}

После компиляции выражение if (ENV === 'development') превратится в if (true), т.е. будет выполняться всегда.

Comments

[Максим Иванов]

я сделал так:
/*** import css */
require(`./sass/app.scss`);
require(`./sass/themes/app.${NODE_ENV}.scss`);

[qtuz]

Отличо. А ещё sass-loader позволяет передать переменные в каждый scss-файл. То есть ENV можно писать так:

@if ($ENV == 'production') {
  $url = 'prod_url';
} @else {
  $url = 'dev_url';
}

@import $url;