nickjj / manifest-revision-webpack-plugin

Write out a manifest file containing your versioned webpack chunks and assets.
ISC License
124 stars 40 forks source link

Plugin does not support vue.js #51

Open lipton-v opened 5 years ago

lipton-v commented 5 years ago

Hello, I am using manifest-revision-webpack-plugin. I have to use vue.js as well. Without vue plugin works well. But there is a problem with vue components. Styles from vue components are not applying. Without flask, jinja2, manifest-revision-webpack-plugin there are no problems. Simple:

<link href="..." rel="stylesheet">

to add css file to html. Vue components work well. So webpack.config.js does not contains errors and does not have wrong settings. But I have to use flask, etc. I want to unite manifest-revision-webpack-plugin and vue.js with working css-styles in vue components.

Currently styles in components are not applying to tags and styles from vue components are also not applying to index.css

webpack.config.js

entry: {
        index_js: [
            PATHS.assets + '/scripts/index.js'
        ],
        index_css: [
            PATHS.assets + '/styles/index.css'
        ]
},
module: {
        rules: [          
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loader: {
                        scss: 'vue-style-loader!css-loader!sass-loader'
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    }
                ]
            }
 },
plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin (PATHS.assets + '/styles/[name].[chunkhash].css'),
        new ManifestRevisionPlugin(path.join(PATHS.build, 'manifest.json'), {
            rootAssetPath: PATHS.assets,
            ignorePaths: ['/styles', '/scripts'],
            extensionsRegex: /\.(jpe?g|png|gif|svg)$/i
        })
    ]
};