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 包中使用的./以及 postcss 识别scss文件，而不必用_显式前缀所有内容

编辑（字体真棒错误）：

fontawesome.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 时遇到了同样的问题。

Answer 2

经过一天的浪费时间，我终于找到了souloution。 有一个postcss插件可以为我们做这件事！

首先，使用 npm 作为开发依赖项安装它：

npm i postcss-url -D

现在你必须更新你的webpack.config.js以使用postcss-url 。 直接在postcss-import后添加postcss-url

Answer 3

当我从 webpack.config.js 文件中删除require("postcss-import")时，它对我有用。 我花了 1 天的时间来解决它。 在这里找到了解释： Webpack style-loader / css-loader: url() path resolution not working