Сервер разработки Webpack — объединение файлов CSS в один файл при сохранении файла

Постановка проблемы

У меня есть требование в устаревшем приложении React, которое имеет несколько файлов scss в определенном каталоге. CSS не импортируется на уровне компонентов, приложение использует gulp в качестве системы сборки, где оно отслеживает изменения файлов, выдает соответствующие файлы CSS, объединяет их, наконец, вставляет тег ссылки в файл index.html (этот шаг не требуется). находиться в режиме просмотра) и страница перезагружается.

Что нужно

Нам нужно переместить это из конфигурации gulp в использование Webpack для вышеупомянутых шагов.

Что я пробовал до сих пор - что работает

Моими первоначальными мыслями были (поскольку мы используем реагирующие сценарии и реагирующее приложение, перемонтированное)

  1. Используйте node-sass-chokidar, чтобы скомпилировать файлы sass в CSS и записать их в определенный каталог.
  2. После того, как этот шаг выполнен, в config-overrides.js я использовал подключаемый модуль Webpack под названием webpack-concat-plugin, чтобы объединить файлы в определенном каталоге в один файл и записать его в папку сборки.
  3. В index.html есть тег ссылки, указывающий на расположение этого файла.

Вышеуказанные шаги работают в производственном режиме.

Что я пробовал до сих пор - что не работает

Я пытаюсь реализовать то же самое и в режиме разработки, но я не могу понять, как мне запускать плагин webpack-concat каждый раз, когда node-sass-chokidar выплевывает файлы css (он работает в режиме просмотра и запускает при каждом изменении файла scss). Я попытался создать собственный плагин Webpack и использовать режим просмотра, чтобы подключиться, но я не уверен в вышеупомянутом вопросе. Плагин webpack выглядит так.

const pluginName = 'ConcatCSSPlugin';
const ConcatPlugin = require('webpack-concat-plugin');

class ConcatCSSOnFileChangeWebpackPlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tap(pluginName, compilation => {
      console.log('The webpack hook is running');
      /* How should I invoke the ConcatPlugin */
    });
  }
}

module.exports = ConcatCSSOnFileChangeWebpackPlugin;

config-overrides.js выглядит так

module.exports = {
  webpack: function override(config, env) {
    if (env === 'production') {
      config.plugins.push(new ConcatPlugin({
        outputPath: 'build/styles',
        fileName: 'style.css',
        injectType: 'none',
        filesToConcat: ['./dist/compiled-css/**.css'],
        attributes: {
            async: true
        }
      }), new TestPlugin());

      config.stats = {
        all: true
      }
    }
    return config;
  }
}

webpack react-app-rewired react-scripts
person Harsha Venkatram    schedule 06.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать опцию дополнительных данных из sass-loader, чтобы создать псевдокорневой файл, включающий все ваши файлы scss. Чтобы убедиться, что вы добавили его только один раз, вам может понадобиться использовать что-то вроде этого:

let appendedOnce = false;

const sassLoaderRule = {
  loader: 'sass-loader',
  options: {
    additionalData: function (content) {
      if (appendedOnce) return content;

      appendedOnce = true;

      return `
        @import 'fileOne.scss'; 
        @import 'fileTwo.scss'; 
        @import 'etc.scss';
      ` + content;
    }
  }
}

Кроме того, если файлов для импорта слишком много, вы можете использовать node-sass-glob-importer и вместо этого напишите: @import './**/*.scss';. Ознакомьтесь с этим ответом для получения более подробной информации.

person Cosmin Ababei    schedule 15.10.2020
comment
Благодарю вас! Это помогло - person Harsha Venkatram; 16.10.2020

arrow_upward
1
arrow_downward

Вам не нужно изобретать велосипед... используйте возможности webpack.

Создайте файл root.scss, который будет импортировать (используя импорт sass) все соответствующие файлы scss.

Затем импортируйте его из корневого js-файла вашего приложения (вам нужно будет предоставить загрузчики для обработки sass).

Эти шаги добавят ваши файлы scss в веб-пакеты в зависимости от вашего дерева, это означает, что в режиме разработки веб-пакет будет следить за ними и перекомпилировать все, что необходимо.

Вторая часть заключается в использовании html-webpack-plugin для создания и внедрения в него статических ресурсов.

person felixmosh    schedule 09.10.2020
comment
Это именно проблема. В текущем сценарии я не смогу добавить корневой файл scss из-за того, как работает существующая система. - person Harsha Venkatram; 10.10.2020
comment
Почему бы и нет? в чем проблема? - person felixmosh; 10.10.2020
comment
Проблема в текущем сценарии заключается в том, что они используют grunt для 1. компиляции scss в css, 2. объединения всех файлов css в один и записи его в определенный каталог с определенным именем, 3. файл index.html содержит тег ссылки на этот конкретный файл. И мы не можем изменить это поведение сейчас. - person Harsha Venkatram; 11.10.2020
comment
Я запутался, то, что я предложил, заменяет процесс, который вы описали. Без необходимости импортировать каждый файл css в свой компонент - person felixmosh; 11.10.2020