后CSS找不到node_modules的路径 [英] post-css not finding paths from node_modules

问题描述

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

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

我已经完成了所有工作，但是当我导入node_modules时，它很费力，因为它不能找到位于node_modules文件夹中的路径。

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.

我有当前的 app.scss 文件

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

@import "./_buttons";

button类实际上称为 _buttons.scss ，但出于某种原因，postcss并没有这样做，所以我必须定义 _ ，尽管我知道可以不导入它。

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.

所以这是我想尽可能解决的第一个问题，但第二个问题是在导入字体很棒时，它会找到字体很棒的包，但找不到文件 variables 检查了程序包后，我发现没有相对路径，它只是变量。由于这是一个软件包，有没有一种方法可以缓解webpack中的此问题，从而阻止这种情况的发生和构建失败的原因？

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?

这是我的 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 似乎根本没有什么不同。

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

如何从文件根目录运行postcss？即使没有fontawesome软件包中使用的 ./ ，并且postcss无需识别即可识别 scss 文件在所有内容前加上 _

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 _

编辑（字体错误）：

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

错误：未能找到变量

Error: Failed to find 'variables'

推荐答案

也许，这可能会对您有所帮助，应该在webpack.config.js中添加，特别是在purgeCss中- >内容，即不同的路径。

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}"
]

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

I had the same issue using NextJS in production.

这篇关于后CSS找不到node_modules的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！