Webpack 4: Создание нескольких CSS-файлов тем - PullRequest
Новая
       56

Webpack 4: Создание нескольких CSS-файлов тем

2 голосов
/ 14 апреля 2019

Мне нужно создать несколько темных файлов CSS с помощью веб-пакета версии 4 и «мини-плагина для извлечения CSS» в моем реактивном проекте.Зависит от того, где webpack найдет импорт файла SCSS, он должен использовать loader дважды - с разными данными в настройках sass-loader.

Я не нашел ничего полезного в Интернете для этой цели.Я также уже пытался использовать такие загрузчики веб-пакетов, как: веб-пакеты-комбайны-загрузчики, мульти-загрузчики и т.д ...

здесь есть часть конфигурации веб-пакета 

module: {
  rules: [
    {
       test: /\.scss$/,
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
         },
         'css-loader',
         {
            loader: "sass-loader",
            options: {
               data: '$theme: dark;',
            }
         },
       ],
     },
     { // the same except data in options
       test: /\.scss$/,
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
         },
         'css-loader',
         {
            loader: "sass-loader",
            options: {
               data: '$theme: white;',
            }
         },
       ],
     },
  ],
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'client.white.css',
  }),
  new MiniCssExtractPlugin({ 
    filename: 'client.dark.css',
  }),
],

файл scss (button.scss) Я использую такое условие: 

$background: #06cc1a;
$color: white;

@if $theme == dark {
  $background: white;
  $color: black;
}

.button {
    background-color: $background;
    color: $color;
  }
}

В результате я хочу получить два CSS-файла client.white.css, где были применены переменные sass для белой темы и client.dark.css где были применены переменные для темной темы

Ответы [ 2 ]

1 голос
/ 17 июля 2019

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

entry: {
    light: './src/css/light.scss',
    dark: './src/css/dark.scss'
}

. Содержимое файлов light.scss выглядит следующим образом: 

$background: #001560;    

@import "~base/scss/base.scss";

Webpack будет выводить по одному файлу CSS для каждой темы, содержащей все стили, как базовые, так и специфичные для темы, что прекрасно при оптимизации для производства.

Обратите внимание, что вы также получите избыточный файл JS,которые вы, возможно, захотите очистить после сборки.

0 голосов
/ 15 апреля 2019

Я работал над веб-приложением, в котором используется мульти-тема, и мы решили эту проблему, сохранив цвета каждой темы в бэкэнде, чтобы мы могли получить значение из API в зависимости от запроса, а для стиля мы используем styled-components для этого .

Я считаю, что css-in-js действительно полезен для такого рода проблем. Мы фактически используем как стилизованные компоненты, так и LESS CSS для нашего стиля. styled-components используются для раскраски в зависимости от темы, а остальное - на LESS CSS. Возможно, вы можете попытаться использовать это тоже, или даже встроенный css должен выполнить эту работу, так как переменная JS будет работать над этим.

Конкретным примером является создание компонента ThemeProvider, который охватывает все приложение как его дочерний элемент, ThemeProvider будет содержать объявление класса с использованием styled-components, и этот класс может быть повторно использован во всей области приложения.

...