Doesn't work with Vue

[outOFFspace]

trafficstars

• Webpack config:

const plugins = [
    new ExtractTextPlugin({filename: '[name].[contenthash].css', allChunks: true}),
    new PurgecssPlugin({
        paths: glob.sync([
            path.join(__dirname, './../app.html'),
            path.join(__dirname, './../**/*.vue')
        ])
    })
];
const rules = [
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            transformToRequire: {vector: 'src', img: 'src', image: 'xlink:href'},
            loaders: {
                css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                }),
                i18n: '@kazupon/vue-i18n-loader',
                sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/assets/sass/variables"',
                scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/assets/sass/variables";'
            }
        }
    },
    {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory=true',
        exclude: /node_modules/,
        include: [resolve('src'), resolve('test')]
    },
    {
        test: /\.(png|jpe?g|gif)(\?.*)?$/,
        loader: 'url-loader',
        query: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
    },
    {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
    },
    {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
    },
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            use: 'css-loader',
            fallback: 'vue-style-loader'
        })
    }
];
...

• purgecss-webpack-plugin: ^1.4.0
• Behavior: It should not include unsusable styles in .css-file

I have single file component with this style:

<style>
    .asdasdas {
        color: #f0f2fa;
    }
    .css-pseudoselect .item-pseudoselect {
        padding-right: 25px;
    }

    .autocomplete .options .item:hover .blue,
    .css-pseudoselect .options .item:hover .blue {
        color: #256799;
    }

    .css-pseudoselect .options .item,
    .options .item,
    option {
        white-space: normal;
        line-height: 18px;
        box-sizing: border-box;
        padding: 5px 6px;
    }

    .options .item:hover,
    option:hover {
        background-color: #f0f2fa;
        color: #414141;
    }

    .pseudoselect .options {
        white-space: normal;
    }

    .pseudoselect .options label:before {
        position: absolute;
        left: 0;
        top: 1px;
        margin: 0;
    }

    .pseudoselect .options label {
        position: relative;
        display: inline-block;
        padding-left: 25px;
    }

    @media (min-width: 769px) {
        body .app-header .container-header,
        .container-body > .container,
        .container-main, .app-content,
        .container-header {
            z-index: unset !important;
            position: relative !important;
        }

        .fixed-branding,
        .fixed-branding a {
            z-index: unset !important;
        }
    }
</style>

But purgecss doesn't cut class .asdasdas from styles files.

[bbedward]

I'm experiencing the same, webpack config:

const path = require('path');
const webpack = require('webpack');

/*
 * Webpack Plugins
 */
const ManifestPlugin = require('webpack-manifest-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');

// take debug mode from the environment
const debug = (process.env.NODE_ENV !== 'production');

// Development asset host (webpack dev server)
const publicHost = debug ? 'http://localhost:2992' : '';

module.exports = {
    // configuration
    context: __dirname,
    entry: {
        app_js: path.join(__dirname, 'src', 'app')
    },
    output: {
        path: path.join(__dirname, 'app', 'static', 'build'),
        publicPath: `${publicHost}/static/build/`,
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].js',
    },
    resolve: {
        extensions: ['.ts', '.js', '.jsx'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devtool: 'source-map',
    devServer: {
        headers: {'Access-Control-Allow-Origin': '*'},
    },
    module: {
        rules: [
            {test: /\.html$/, loader: 'raw-loader'},
            {
                test: /\.s?[ac]ss$/,
                use: [
                    { loader: 'vue-style-loader', options: { sourceMap: true } },
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true, precision:10 } }
                ],
            },
            {
                test: /\.(ttf|eot|svg|png|jpe?g|gif|ico|woff)(\?.*)?$/i,
                loader: 'file-loader',
                options: {
                    context: path.join(__dirname, 'src'),
                    name: '[path][name].[hash].[ext]',
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {presets: ['env'], cacheDirectory: true}
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules|\.d\.ts$/,
                options: {
                appendTsSuffixTo: [/\.vue$/],
                }
            },
            {
                test: /\.d\.ts$/,
                loader: 'ignore-loader'
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({io: 'socket.io-client'}),
        new ManifestPlugin({fileName: path.join(__dirname, 'app', 'webpack', 'manifest.json'), writeToFileEmit: debug}),
        new VueLoaderPlugin(),
        new PurgecssPlugin({
            paths: glob.sync([
                path.join(__dirname, './**/*.vue'),
                path.join(__dirname, './src/**/*.js'),
                path.join(__dirname, './src/**/*.ts')
            ]),
            minify: true
        })
    ].concat(debug ? [] : [
        // production webpack plugins go here
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            }
        }),
    ]),
};

[claviering]

Doesn't work with *.vue file

[Mayurifag]

+1 here, wasnt able to get plugin working with vue-cli and .vue files with .scss lang styles there

[jxs7754]

your need set extractors. detail: https://stackoverflow.com/questions/54300043/how-to-configure-purgecss-for-vue-cli-3-projects-with-tailwindcss-including-re?r=SearchResults