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