CSS output issue

[plortinus]

CSS output issue

[Plortinus]

Yes that's right

[Plortinus]

The css code for modal is created in the '<style></style>' markup of the html.The extracted css is the common part among all the entries.

[lavezzi1]

@Plortinus but output .css file doesn't contains css code for modal. Another problem that I found is: I have two pages, if they are both have imported modal import Modal from 'components/modal.vue' everything works fine, but if one haven't then the output .css file doesn't have css code for modal. How can I fix that? Please help!

[Plortinus]

I changed the webpack.config.js. Now, it can extract css from the .vue file into a single css file for that page.

[lavezzi1]

@Plortinus thank you man, you're amazing. Can please show how to setup up postcss? To be able to use it like <style lang="postcss". I tried this but seems like it doesn't works

{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            fallback: 'style-loader'
                            use: [
                                {
                                    loader: 'css-loader',
                                    options: { importLoaders: 1 }
                                },
                                'postcss-loader'
                            ]
                        })
                    }
                }
            },

[Plortinus]

Check postcss branch to see the changes.

[lavezzi1]

@Plortinus Great, thank you so much. To be able to compile postcss from .css files I need to add this:

{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'postcss-loader'],
                    fallback: 'style-loader'
                })
            },

Right?