标签: purifycss

使用React和Webpack删除未使用的css

我正在尝试使用purify-css for WebPack 从我的应用程序中删除未使用的css类.

要构建这个项目我全光照React,scss,WebPack并PostCss建立和编译一切.

到目前为止,我能够取得进展,但有一些问题,我不知道为什么,但预期结果不正确.我有一个非常非常基本的设置来测试这些场景,所以这是我的index.html和app.js文件(到目前为止我唯一的文件):

的index.html

<body>
    <nav>
        <a href="">home</a>
    </nav>
    <hr />
    <div id="app"></div>
    <footer class="my-other-heading"></footer>
</body>

Run Code Online (Sandbox Code Playgroud)

app.js

class App extends React.Component {
    render() {
        return (
            <h1 className="my-other-heading">Mamamia!</h1>
        );
    }
}

render(<App />, window.document.getElementById("app"));

Run Code Online (Sandbox Code Playgroud)

在css文件中,我使用的是Normalize.css(带有一堆css classess),只有3个自定义类:

.my-class {
    background-color: #CCDDEE;
}

.my-heading {
    color: red;
}

.my-other-heading {
    color: blue;
}

Run Code Online (Sandbox Code Playgroud)

预期的输出应该只包含这些类:

html, body, nav, a, hr, div, footer, h1, .my-other-heading

Run Code Online (Sandbox Code Playgroud)

但它有一些其他类:

.my-heading, h2, h3, h4, …

Run Code Online (Sandbox Code Playgroud)

reactjs webpack purifycss

cel*_*ade

lucky-day

11
推荐指数

2
解决办法

3687
查看次数

如何在 Laravel Mix 中使用 PurifyCSS？

我想在Laravel中使用PurifyCSS，但我无法让它工作。

堆

Laravel：5.5.4

NPM：6.0.0

Node.js：8.10

代码

mix.styles([
    'resources/assets/css/panel/a.css',
    'resources/assets/css/panel/b.css',
    'resources/assets/css/panel/c.css',
    'resources/assets/css/panel/d.css',
], 'public/css/panel.css').options({
    purifyCss: {
        purifyOptions: {
            info: true,
            rejected: true,
            minify: true
        },
        paths: ['resources/views/admin-layout.blade.php'],
        verbose: true
    },
});

Run Code Online (Sandbox Code Playgroud)

我在互联网上搜索，但找不到任何东西。我想从所有 Blade 页面中删除未使用的 CSS。即使在此链接上，也没有人给出正确答案。即使 PurifyCSS 是第一个，它也不起作用。

谢谢您的帮助。

laravel laravel-5 laravel-mix purifycss laravel-5.5

Moh*_*hNj

2018 12-09

5
推荐指数

1
解决办法

2047
查看次数