- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
Webpack 5、PurgeCss、Purgecss-webpack-plugin、
你好,我使用 Webpack 5 创建了一个项目来处理 Scss => CSS 转换以及更多。
除了 PurgeCss 之外,我已经让一切正常工作。
当我运行 Webpack 时,我不断收到错误 PurgeCss is not a constructor。
有趣的是,这曾经有效,但自从我更新了 package.json 文件以消除漏洞后,它现在崩溃了。
The full code can be found on the GitHub repo. .
如果有人能告诉我原因,我将不胜感激,谢谢。
const path = require("path");
// const glob = require("glob");
const _MiniCssExtractPlugin = require("mini-css-extract-plugin");
const _StyleLintPlugin = require("stylelint-webpack-plugin");
const _ESLintPlugin = require("eslint-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const _CopyPlugin = require("copy-webpack-plugin");
// const { _PurgeCSSPlugin } = require("purgecss-webpack-plugin");
// const PATHS = {
// src: path.join(__dirname, "../src"),
// };
// const PurgecssPlugin = new _PurgeCSSPlugin({
// paths: glob.sync(`${PATHS.src}/**/*`),
// });
const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
});
const ESLintPlugin = new _ESLintPlugin({
overrideConfigFile: path.resolve(__dirname, ".eslintrc"),
context: path.resolve(__dirname, "../src/js"),
files: "**/*.js",
});
const StyleLintPlugin = new _StyleLintPlugin({
configFile: path.resolve(__dirname, "stylelint.config.js"),
//configBasedir: path.resolve(__dirname, "./node_modules/"),
context: path.resolve(__dirname, "../src/scss"),
files: "**/*.scss",
syntax: "scss",
});
/**
* If getting an error during npm start or watch it's
* most posable because the src/fonts or src/img folders are empty
*/
const CopyPlugin = new _CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "../src/img/"),
to: path.resolve(__dirname, "../../project/public/img/"),
},
{
from: path.resolve(__dirname, "../src/fonts/"),
to: path.resolve(__dirname, "../../project/public/fonts/"),
},
{
from: path.resolve(__dirname, "../src/index.php"),
to: path.resolve(__dirname, "../../project/public/index.php"),
},
],
});
module.exports = {
CleanWebpackPlugin: new CleanWebpackPlugin(),
MiniCssExtractPlugin: MiniCssExtractPlugin,
// PurgecssPlugin: PurgecssPlugin,
ESLintPlugin: ESLintPlugin,
StyleLintPlugin: StyleLintPlugin,
CopyPlugin: CopyPlugin,
};
最佳答案
如 https://github.com/FullHuman/purgecss/issues/994 中所述
将导入更新为确切的大小写
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
似乎修复了它!
关于Webpack 5 - PurgeCss - 不是构造函数错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74000391/
版本:“^1.0.1” 操作系统:Windows7 运行以下命令后(通过 npm 脚本或全局 purgecss 安装) purgecss -c ./purgecss.config.js 我明白了: E
Tailwind 和 PostCSS/PurgeCSS 相当新,所以希望这是一个相当简单的修复。 在我的 tailwind.config.js ,我正在扩展一些间距值,包括添加 0.5 值以与默认的
所以我将 TailwindCSS 用于我正在开发的 WP 主题。 我在创建生产级主题文件时遇到了一个问题,因为根据我对问题的理解,purgecss 无法识别模板部件上使用的条件类。例如,假设我创建了一
Webpack 5、PurgeCss、Purgecss-webpack-plugin、 你好,我使用 Webpack 5 创建了一个项目来处理 Scss => CSS 转换以及更多。 除了 Purge
Webpack 5、PurgeCss、Purgecss-webpack-plugin、 你好,我使用 Webpack 5 创建了一个项目来处理 Scss => CSS 转换以及更多。 除了 Purge
我想忽略 Tailwind Utility 类中所有以 w- 开头的类和所有断点宽度类,如 lg:w-。 这是我在 tailwind.config.js 文件中所做的: purge: { op
我正在尝试使用 Tailwindcss RTL 插件,它生成一些以 [dir=rtl] 或 [dir=ltr] 开头的类。但由于 Purge CSS 会删除它,而不管它的用途。 最佳答案 这是我解决这
我正在尝试使用 laravel-mix-purgecss 清除我的 css 文件.这就是我所做的: 使用 NPM 安装它 已添加 .purgeCss()到我的 webpack.mix.js文件 已添加
我一直在使用带有“清除”选项的 Tailwind 来使最终的 css 文件更小且成功。但是,我一直想知道我的方法的效率。我正在处理有很多子文件夹的项目,我都指定如下: purge: {
我正在尝试为使用 TailwindCSS 构建的静态站点设置 webpack。我正在尝试使用 PurgeCSS 制作我的 css 文件并删除任何未使用的内容,但我认为它不起作用。它将编译没有错误,但
我有“完整”的 3.9 MB Tailwind CSS 文件并成功应用 PurgeCSS 将其减少到 9 kB。但它也清除了所有响应类,如 md:px-6 ,它们没有出现在我清除的版本中。 注意:这个
我有一个使用 Angular CLI 创建的 Angular 项目,所以我有用于配置构建的 angular.json 文件。 我想集成 PurgeCSS,因为它似乎是减少 CSS 包大小的好工具。 在
背景: 我有一个 Webpack setup我使用带有 esbuild-loader 的实时 HMR 服务器使用 PurgeCSS 预处理 SCSS用于加快 Webpack 中的编译,但即便如此我的编
我有一个我正在构建的 next.js 站点,它使用如下特定文本, const defaultTheme = require('tailwindcss/defaultTheme') module.exp
我有一个带有 react-bootstrap、bootstrap 和 scss 设置的 gatsby 站点,我正在尝试清除我未使用的 css。为此,我需要使用 purgeCss,但它不能按需要工作。似
尽管我的 sass gulptask,我的 .min.css 文件仍然是 148kb 高......有没有人知道我还能改变什么来缩小我的任务我的 .min.css 还要更多?你们中有人使用其他压缩效果
我将 NuxtJS (VueJS) 与 TailwindCSS 和 PurgeCSS 结合使用。到目前为止,我一直在为 text-green-800、bg-red-400 等颜色指定完整的 CSS 类
我是一名优秀的程序员,十分优秀!