Используйте Pureycss с Angular 4

Question

Я пытаюсь использовать Angular с PurifyCss (используя веб-пакет), но пока что безуспешно в процессе... Я пытаюсь сделать это в среде разработчиков, в основном я сделал следующее:

• Создать новый проект, используя AngularCli ng new my-project
• Извлечь конфиг веб-пакета ng eject
• Установите PurifyCss npm i --save-dev purify-css purifycss-webpack

Теперь я думаю, что в этом вся прелесть, потому что на странице PurifyCss github написано:

Вы должны использовать его с плагином extract-text-webpack-plugin.

Но когда я пытался добавить это, я продолжаю получать ошибки. Я не знаю, происходит ли это потому, что Angular использует файл JS вместо CSS, или потому что я делаю что-то не так. Единственные изменения, которые я внес в конфигурацию WebPack:

Примечание: я использую это с scss файлы.

Я удаляю некоторые строки веб-пакета, но код работает просто отлично, если отменить изменения, которые я описываю ниже.

const glob = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

"module": {
    "rules": [
        // other rules...
        {
            "exclude": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "exports-loader?module.exports.toString()",
                    // nothing changes here
                ]
            })
        },
        {
            "include": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "style-loader",
                    // nothing changes here
                ]
            })
        },
        // other rules...
    ]
}
"plugins": [
    new ExtractTextPlugin({
        filename: 'styles.bundle.js'
    }),
    new PurifyCSSPlugin({
        paths: glob.sync([
            path.join(__dirname, 'src', 'index.html'),
        ])
    }),
    // other plugins
]

Что мне нужно сделать, чтобы это работало? Я застрял на этом и не могу заставить его работать.

Answer 1

Вы можете попытаться добавить другой инструмент для сборки (Gulp или Grunt) поверх Angular CLI и вызвать определенную задачу после завершения сборки Angular CLI. Это поможет вам избежать выброса и справиться с ошибками такого типа, с которыми вы сталкиваетесь. В дополнение к этому, если команда Angular примет решение изменить конфигурацию веб-пакета или даже перейти к новому инструменту сборки, скорее всего, вы снова столкнетесь с той же проблемой.

Я написал статью специально по этой теме, где я предоставил инструкции и настройки для Grunt и Gulp. Оба они работают отлично.

Как удалить ненужный CSS в вашем Angular проекте