问题标签 [purifycss]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
gulp - 使用 Gulp 通过 purifycss 运行 PostCSS 编译的样式表
我有一个任务,首先通过 postcss 插件运行 CSS 文件,然后通过 purifycss 像这样:
然而 CSS 没有被净化。有谁知道为什么?
运行构建的实际任务可以在这里找到:superfly-css-task-build
如果你克隆这个项目并运行npm i && npm run test
然后查看target/test/css/index.css
所有未使用的 CSS 仍然包含在文件中,即使它src/test/html/index.html
被用作 purifycss 过滤器。
html - Purifycss 不删除未使用的 css 类
我有这段代码试图删除类
hello3
:
pure.css 中的输出与变量 css 相同:
如何解决?
javascript - 运行 grunt 任务两次导致错误 Cannot call method 'forEach' of undefined Use
新来的 grunt 我已经成功地用它来运行purifycss
. 现在我想purifycss
用不同的参数运行两次,然后理想地连接两个结果文件。我到目前为止是这样的Gruntfile
:
从终端运行 grunt purify 时得到的输出:
对这里出了什么问题的任何帮助表示赞赏!
javascript - 使用 HtmlWebpackPlugin 时 purify-webpack 插件出错
我正在使用该purifycss-webpack
插件从我的 webpack 构建中删除未使用的 css。一点上下文,我们的应用程序使用System.import
. HtmlWebpackPlugin
此外,我使用.ejs
模板生成构建的 html 。
插件配置
错误
reactjs - 使用 React 和 Webpack 删除未使用的 css
我正在尝试使用purify-css for WebPack 从我的应用程序中删除未使用的 css 类。
为了构建这个项目,我正在使用React
, scss
,WebPack
并PostCss
构建和编译所有内容。
到目前为止,我能够取得进展,但有一些问题,我不知道为什么,但预期的结果不正确。我有一个非常基本的设置来测试这些场景,所以这是我的 index.html 和 app.js 文件(我目前仅有的文件):
索引.html
应用程序.js
在 css 文件中,我使用的是Normalize.css(带有一堆 css 类)和只有 3 个自定义类:
预期的输出应该只包含这些类:
但是它还有其他一些类:
为什么会这样?它几乎删除了所有它应该删除的类,但其中一些仍然存在,并且显然没有在索引文件中使用的类。我不知道它们是否因为 React 方面的其他声明而持续存在,但我仅引用 src 文件。这是我的 purify-css 配置:
angular - 将 purifycss 与 Angular 4 一起使用
我正在尝试将 Angular 与PurifyCss一起使用(使用 webpack),但到目前为止,该过程没有成功......我正在开发环境中尝试这个,基本上我所做的是:
- 使用 AngularCli 创建新项目
ng new my-project
- 弹出 webpack 配置
ng eject
- 安装 PurifyCss
npm i --save-dev purify-css purifycss-webpack
现在这就是我认为它的诀窍所在,因为在 PurifyCss github 页面上它说:
您应该将它与 extract-text-webpack-plugin 一起使用。
但是当我尝试添加它时,我不断收到错误。我不知道这是因为 Angular 使用 JS 文件而不是 CSS,还是因为我做错了什么。我对 WebPack 配置所做的唯一更改是:
注意:我将它与
scss
文件一起使用。我正在删除一些 webpack 行,但是如果撤消我在下面描述的更改,代码就可以正常工作。
我需要做什么才能使其工作?我被困在这个问题上,无法让它工作。
html - 如何阻止 Webpack-3 的 PurifyCSSPlugin 清理太多?
问题
其他一切都相同,我的最终页面的 CSS 结果不同。prod 版本缺少正确的 flexbox 对齐,如下面的比较所示:
开发
产品
该问题是由 PurifyCSSPlugin 引起的。我不知道如何配置它仍然清理css的正确部分,保留我真正需要的部分?
任何帮助,将不胜感激。完整的代码可在此处获得。
研究至今
2017 年 8 月 21 日更新:
在生产版本中,以下类缺少 css
字幕
标题:不(.is-spaced)+ .subtitle { 边距顶部:-1.5rem; }
列
@media screen and (min-width: 769px), print .columns:not(.is-desktop) { display: flex; }
设置
我使用 webpack-3 和bulma来制作网页。我定义了两个脚本任务来构建我的应用程序 1. 在开发中和 2. 用于生产。
在我的 webpack 配置中,我根据 NODE_ENV 变量在两种配置之间切换以进行 css 处理。配置如下所示:
此外,我禁用了 ExtractTextPlugin 进行开发。
控制台内显示的唯一值得注意的信息是以下弃用警告:
webpack - 通过 laravel mix 净化 css 资产不起作用
描述:
编译css文件时净化选项不起作用。你能解释一下这种方法有什么问题吗?
重现步骤:
这是在我的混合文件中:
这是我的 css 文件,编译后保持不变:
```
这是在我的刀片文件中:
php - 如何在php中执行nodejs程序
我正在开发使用 purify-css 的项目
我已经用 npm 在服务器上安装了 purify-css,现在我想通过 PHP 执行下面显示的命令,我正在使用 exec() 方法。
但是命令不起作用。如果我直接在终端中使用相同的命令,那么它工作正常。所有其他命令,如“mkdir”和所有其他命令都工作正常,但 PHP exec() 函数中的这个命令不起作用。我不知道为什么?提前致谢。指出你是否注意到了什么。
javascript - 是否可以强制 PurifyCss 插件等到 bundle 准备好?
在我开始集成purifycss-webpack之前,我的第一个“Hello Webpack”项目进展顺利。如果我手动删除我的 /dist 文件夹然后构建,则此配置有效。但是如果 /dist 文件夹存在并且CleanWebpackPlugin按照设计的方式将其删除,那么 PurifyCSS 会抛出这个错误:
clean-webpack-plugin: \dist 已被删除。
purifycss-webpack\dist\index.js:52 \ if (!_fs2.default.existsSync(p)) throw new Error('Path ' + p + ' 不存在。');
是否有另一种方法让 Webpack 仅在所有其他插件执行后才运行 PurifyCSS?我以为我是通过将它放在插件数组的最后来做到这一点的,但这对我来说感觉像是执行顺序问题。这是我的配置: