[英]post-css not finding paths from node_modules
I currently have a Angular project which I am looking to purge the css using purgecss.我目前有一个 Angular 项目,我希望使用 purgecss 清除 css。
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.我已经让一切正常,但是当我导入 node_modules 时,它很挣扎,因为它找不到位于 node_modules 文件夹中的路径。
I have the current app.scss
file我有当前的app.scss
文件
@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.按钮类实际上被称为_buttons.scss
但由于某种原因 postcss 没有选择它所以我必须定义_
虽然我知道它可以在没有的情况下导入。
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
.所以这是我想尽可能解决的第一个问题,但第二个问题是,在导入 font awesome 时,它找到了 font awesome 包,但在我查看包后找不到文件variables
,我可以看到没有相对路径,它只是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 中缓解这个问题,以阻止这种情况发生和构建失败?
Here is my webpack.config.js
这是我的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.我试过设置importLoaders: 1
这似乎没有任何区别。
How can I get postcss to run from the files root directory?如何让 postcss 从文件根目录运行? 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 包中使用的./
以及 postcss 识别scss
文件,而不必用_
显式前缀所有内容
Edit (font awesome error):编辑(字体真棒错误):
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'错误:未能找到“变量”
Well, maybe this could help you, in the webpack.config.js you should add, specifically in purgeCss -> content, the diferents paths.好吧,也许这可以帮助您,在您应该添加的 webpack.config.js 中,特别是在 purgeCss -> content 中,不同的路径。
content: [
"./node_modules/name_package/**/**/*.{css,scss}"
]
I had the same issue using NextJS in production.我在生产中使用 NextJS 时遇到了同样的问题。
After a day of wasting time, finally, i found the souloution.经过一天的浪费时间,我终于找到了souloution。 There is a postcss
plugin to do it for us!有一个postcss
插件可以为我们做这件事!
First, install it using npm as dev dependency:首先,使用 npm 作为开发依赖项安装它:
npm i postcss-url -D
Now you must update your webpack.config.js
to use postcss-url
.现在你必须更新你的webpack.config.js
以使用postcss-url
。 Just add postcss-url
directly after postcss-import
直接在postcss-import
后添加postcss-url
It worked for me, when I removed the require("postcss-import")
from the webpack.config.js file.当我从 webpack.config.js 文件中删除require("postcss-import")
时,它对我有用。 It took me 1 day to resolve it.我花了 1 天的时间来解决它。 Found the explanation here: Webpack style-loader / css-loader: url() path resolution not working在这里找到了解释: Webpack style-loader / css-loader: url() path resolution not working
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.