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

Question

问题陈述

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

需要什么

我们需要将它从 gulp 配置转移到使用 Webpack 来完成上述步骤。

到目前为止我所做的尝试 - 什么有效

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

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

以上步骤在生产模式下工作。

到目前为止我尝试过的 - 什么不起作用

我也在尝试在开发模式下实现相同的功能，但我无法弄清楚“如何在每次 node-sass-chokidar 吐出 css 文件时运行 webpack-concat-plugin（它正在运行监视模式并在 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;
  }
}

Answer 1

您可以使用sass-loader 中的additionalData 选项来创建一个包含所有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';。 查看this answer了解更多详情。

Answer 2

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

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

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

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

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