时间戳

首页 > 解决方案 > post-css 找不到来自 node_modules 的路径

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

问题描述

我目前有一个 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 没有选择它，所以我必须定义它，_尽管我知道它可以在没有的情况下导入。

所以这是我想解决的第一个问题，如果可能的话，但第二个是导入字体真棒时，它找到字体真棒包但在我查看包后找不到文件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 包中使用 which 并且 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';

错误：未能找到“变量”

标签： csswebpacksass

解决方案

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

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

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

推荐阅读