Webpack 开发服务器 - 在文件保存时将 CSS 个文件合并为一个文件

Question

问题陈述

我在旧版 React 应用程序中有一个要求，该应用程序在特定目录中有多个 scss 文件。 CSS 未在组件级别导入，应用程序使用 gulp 作为构建系统，它监视文件更改，吐出相应的 CSS 文件，合并它们，最后注入一个 link 标记到 index.html 文件中（此步骤不需要处于监视模式），页面将重新加载。

需要什么

我们需要将此从 gulp 配置移动到使用 Webpack 进行上述步骤。

到目前为止我已经尝试过的-有效的方法

我最初的想法是（因为我们使用的是 react-scripts 和 react-app-rewired）

使用node-sass-chokidar将sass个文件编译成CSS并写入指定目录
完成此步骤后，在config-overrides.js中，我使用了一个名为webpack-concat-plugin的Webpack插件，将特定目录中的文件合并为一个文件并将其写入构建文件夹。
index.html 有一个指向此文件位置的 link 标记

以上步骤适用于生产模式。

到目前为止我已经尝试了什么 - 什么不起作用

我也在尝试在开发模式下实现相同的功能，但我无法弄清楚“我如何运行 webpack-concat-plugin 每次节点-sass- chokidar 吐出 css 文件（在监视模式下是运行ning，每当 scss 文件更改时运行s）”。我尝试创建一个自定义的 Webpack 插件并使用 watch 模式点击，但我不确定上述问题。 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;

配置-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;
  }
}

Answer 1

你不需要发明轮子....利用 webpack 的力量。

创建一个 root.scss 文件，它将导入（使用 sass 导入）所有相关的 scss 文件。

然后从您的应用程序根 js 文件中导入它（您需要提供加载器来处理 sass）。

这些步骤会将你的 scss 文件添加到 webpacks 中，这取决于你的树，这意味着在开发模式下，webpack 会根据需要观察它们重新编译。

第二部分是使用 html-webpack-plugin 构建和注入静态资源。

Answer 2

您可以使用 additionalData option from 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';。查看了解更多详情。

Webpack 开发服务器 - 在文件保存时将 CSS 个文件合并为一个文件

Webpack dev server - Concat CSS files into one file on file save

webpack

react-scripts

react-app-rewired