post-css 未从 node_modules 找到路径

Question

我目前有一个 Angular 项目，我希望使用 purgecss 清除 css。

我已经一切正常，但是当我导入 node_modules 时，它很困难，因为它找不到位于 node_modules 文件夹中的路径。

我有当前app.scss文件

@import "@fortawesome/fontawesome-pro/scss/fontawesome";
@import "@fortawesome/fontawesome-pro/scss/regular";

@import "./_buttons";

按钮类实际上被调用了_buttons.scss，但由于某种原因，postcss 没有选择它，所以我必须定义它，_尽管我知道它可以不导入。

所以这是我想解决的第一个问题，如果可能的话，但第二个问题是，当导入 font Awesome 时，它​​找到 font Awesome 包，但在我查看包后找不到该文件，variables我可以看到没有相对的路径，它只是variables。由于这是一个包，有没有办法在 webpack 中缓解这个问题，以阻止这种情况的发生和构建失败？

这是我的webpack.config.js

const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          modules: true,
          importLoaders: 1,
          ident: "postcss",
          syntax: "postcss-scss",
          plugins: () => [
            require("postcss-import"),
            require("autoprefixer"),
            purgecss({
              content: ["./**/*.html"],
              whitelistPatterns: [/^cdk-|mat-/],
              defaultExtractor: content =>
                content.match(/[\w-/:]+(?<!:)/g) || []
            })
          ]
        }
      }
    ]
  }
};

我尝试过设置importLoaders: 1，但似乎没有什么区别。

如何让 postcss 从文件根目录运行？即使没有./fontawesome 包中使用的 which 以及 postcss 也可以识别该scss文件，而无需在所有内容上显式添加前缀_

编辑（字体真棒错误）：

字体真棒.scss

@import 'variables';
@import 'mixins';
@import 'core';
@import 'larger';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';

错误：找不到“变量”

Answer 1

好吧，也许这可以帮助您，您应该在 webpack.config.js 中添加不同的路径，特别是在 purgeCss -> content 中。

content: [
    "./node_modules/name_package/**/**/*.{css,scss}"
]

我在生产中使用 NextJS 时遇到了同样的问题。