Как изменить имя файла в loader-е wabpack-а и передать новое имя в другой loader (или как на уровне сборки менять стили)?

Question

[bellerofonte]

Как сказать webpack-у, чтобы он преобразовывал имя файла, удовлетворяющего маске '*__style__.css' в другое имя в зависимости от переданных в webpack параметров и вызывал следующий loader с преобразованным именем?
Вот пример конфига:

rules: [
  {
    test: /.*__style__\.css$/,
    loader: /* 
        ... как заменить '__style__' на `${env.STYLE_REF}` и 
        and передать дальше в css-loader ???? 
     */
  },
  /*...и т.д. ....*/

Задача - заставить компонент импортировать стиль в зависимости от окружения.
Например, test-component.jsx:

import React from 'react';
import css from './__style__.css';
/* ... component code ...*/

Если запустить webpack --env.STYLE_REF=dark, то компонент должен импортировать стиль из './dark.css'
А если webpack --env.STYLE_REF=light, то из './light.css'
Это возможно сделать с помощью webpack? Или есть какие-то более простые решения?

Answer 1

[Константин Китманов]

Первое, что приходит в голову, это как-то так:
import(`__${theme}__`.css)
А из вебпака в код передавать переменную theme через DefinePlugin.

Второй вариант — динамически генерить resolve.alias, а в коде писать import '__current-theme.css'. Как-то так:

alias: {
  '__current-theme.css': path.resolve(__dirname, process.env.STYLE_REF)
}

Лучше второй вариант, пожалуй, в первом получится ненужный code splitting.

Comments

[bellerofonte]

DefinePlugin у меня почему-то половину переменных не экспортирует :(
Нашел решение с другого поля зрения:

1) в webpackfile.js прописать:

const opts = {
       THEME: env.theme
    };
    const q = require('querystring').encode({json: JSON.stringify(opts)});

2) добавить в pre-loader для jsx:

rules: [{
                enforce: 'pre',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: `ifdef-loader?${q}!eslint-loader`
            },

3) в коде компонента прописать

import css from
    /// #if THEME=="dark"
    './dark.css';
    /// #else
      ....другие темы
    /// #endif

Работает

[Константин Китманов]

DefinePlugin у меня почему-то половину переменных не экспортирует :(

А вы делаете значениям JSON.stringify?

Че-то какое-то очень сложное решение, да еще сторонний лоадер. Но как хотите, работает и ладно.

[bellerofonte]

Еще можно то же самое сделать, используя 'regexp-replace-loader' https://github.com/EventMobi/regexp-replace-loader

Так, наверное, даже проще, меньше кода в самих компонентах.

[Константин Китманов]

bellerofonte: ну в моем варианте вообще в компонентах кода нет, разруливает загрузчик (чем он и должен заниматься).

[bellerofonte]

А вы делаете значениям JSON.stringify?

...теперь буду

ну в моем варианте вообще в компонентах кода нет, разруливает загрузчик (чем он и должен заниматься).

да, но надо использовать Module.import, а не import {smth} from 'somewhere'
Насчет ifdef-loader согласен, это костыль.

Но вот 'regexp-replace-loader' - самое оно. в код компонентов добавлять ничего не надо, не надо экспортировать переменные, все делается загрузчиком.

[Константин Китманов]

bellerofonte: > надо использовать Module.import
Вас куда-то не туда занесло. Повторю еще раз:

динамически генерить resolve.alias, а в коде писать import '__current-theme.css'. Как-то так:

alias: {
  '__current-theme.css': path.resolve(__dirname, process.env.STYLE_REF)
}

Все! Больше ничего не нужно.