post-css not finding paths from node_modules

Question

I currently have a Angular project which I am looking to purge the css using purgecss.

I have got everything working but when I import node_modules it struggles as it cannot find the paths which are located in the node_modules folder.

I have the current app.scss file

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

@import "./_buttons";

The buttons class is actually called _buttons.scss but for some reason the postcss does not pick this up so I have to define the _ although I know it can be imported without.

So that is the first issue which I would like to fix if possible but the second is that when importing font awesome, it finds the font awesome package but it cannot find the file variables after I looked into the package I can see that there is no relative path and it is just variables . As this is a package is there a way to mitigate this issue within webpack to stop this from happening and the build from failing?

Here is my 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) || []
            })
          ]
        }
      }
    ]
  }
};

I've tried setting importLoaders: 1 which didn't seem to make a difference at all.

How can I get postcss to run from the files root directory? Even without the ./ which is used in the fontawesome package and also the postcss recognising the scss file without having to explicit prefix everything with _

Edit (font awesome error):

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';

Error: Failed to find 'variables'

Answer 1

Well, maybe this could help you, in the webpack.config.js you should add, specifically in purgeCss -> content, the diferents paths.

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

I had the same issue using NextJS in production.

Answer 2

After a day of wasting time, finally, i found the souloution. There is a postcss plugin to do it for us!

First, install it using npm as dev dependency:

npm i postcss-url -D

Now you must update your webpack.config.js to use postcss-url . Just add postcss-url directly after postcss-import

Answer 3

It worked for me, when I removed the require("postcss-import") from the webpack.config.js file. It took me 1 day to resolve it. Found the explanation here: Webpack style-loader / css-loader: url() path resolution not working