Question

我正在尝试删除Angular 6项目中sass文件中的许多未使用的CSS。

我了解到有一个名为PurifyCss的webpack插件。

目前，我无法在我的角度项目中弹出webpack配置，因此我正在使用ngw帮助添加必要的插件（到angular的webpack配置中），以提取未使用的CSS在我的Sass中文件。

ngw.config.ts

import * as webpack from 'webpack';
import { Path } from '@angular-devkit/core';
import { NormalizedBrowserBuilderSchema } from '@angular-devkit/build-angular';
import * as PurifyCSSPlugin from 'purifycss-webpack';
import * as path from 'path';
import * as glob from 'glob';

export type WebpackOptions<T = NormalizedBrowserBuilderSchema> = {
    root: Path,
    projectRoot: Path,
    options: T;
};

const command = process.argv[2].toLowerCase();

export default function (config: webpack.Configuration, options: WebpackOptions) {
    if (command === 'test') {
            console.log('Test configuration is running');
    }
    console.log('To modify webpack build, you can use ngw.config.ts');
    console.log('check path:', glob.sync(path.join(__dirname, 'src/**/*.html')));
    config.plugins.push(
        new PurifyCSSPlugin({
            // This was suggested to help it actually remove the css from: https://github.com/webpack-contrib/purifycss-webpack/issues/54
            // Although there is an error of: Error: data['resolveExtensions'] should NOT have additional properties
            resolveExtensions: ['.html', '.js'],
            // This causes the build to run but does not remove the unused css
            paths: glob.sync(path.join(__dirname, 'src/**/*.html'))
        }),
    );
    return config;
}

仅使用paths属性不起作用，建议从here添加resolveExtensions。

尽管这样做会导致在执行ngw prod build时出现以下错误：

错误：data ['resolveExtensions']不应具有其他属性

如何在Angular-6-cli环境中配置PurifyCSSPlugin以删除sass文件中未使用的CSS？

注意：我对webpack没有太多经验，所以我不确定此配置是否仅适用于CSS文件而不适用于CSS文件。（如果是这样，请纠正我）。

谢谢

如何获取PurifyCSSPlugin来删除Angular6中未使用的CSS？

0 个答案: