post-css 找不到来自 node_modules 的路径

Posted 2023-03-06

【中文标题】post-css 找不到来自 node_modules 的路径

【英文标题】：post-css not finding paths from node_modules

【发布时间】：2020-05-29 07:08:37

【问题描述】：

我目前有一个 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 包中使用的./ 以及识别scss 文件的postcss，也无需使用_ 明确地为所有内容添加前缀

编辑（字体真棒错误）：

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

错误：找不到“变量”

【问题讨论】：

嘿，我也有同样的问题。你最后解决了吗？

@BrunoBruzzano 同样在这里你找到什么了吗？

@Spawnrad 我想我最终放弃了：-/

请在此处查看我的解决方案***.com/a/65505377/2221804

【参考方案1】：

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

【参考方案2】：

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

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

npm i postcss-url -D

现在您必须更新您的webpack.config.js 以使用postcss-url。直接在postcss-import后面加postcss-url就行了

【参考方案3】：

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

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

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