Webpack-encore: style in Vue Js single component are ignored

[alex83130]

Hi,

I add .enableVueLoader() in my webpack.config.js
I try to apply a style in my single vue component App.vue

But it's ingored and I do'nt know why... maybe a bug of vue-loader ?

My App.vue :

<template>
    <div id="app-vue">
        <div class="main">
            <h1>Main</h1>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-4">Cell 1</div>
                    <div class="cell small-4">Cell 2</div>
                    <div class="cell small-4">Cell 3</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "app",
        data() {
            return { };
        },
        components: {
        },
    }
</script>

<style  scoped>
    .cell{
        background-color: #0000F0;
    }
</style>

and my webpack.config.js :

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

var path = require('path');

console.log( path.resolve(__dirname, './web'));

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')


    /** Add entry **/

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './web/assets/js/app.js')
    .addEntry('entrypoint', './app/Resources/views/front/entrypoint.js')
    .addEntry('unityload', './web/assets/unity_map/Build/UnityLoader.js')

    //Style
    .addStyleEntry('app_style',[
        './web/assets/scss/app.scss'
    ])

     /***************/


    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {}, {
        resolveUrlLoader: false
    })

    // to enable vue
    .enableVueLoader()

    .enablePostCssLoader((options) => {
          options.config = {
                  path: './postcss.config.js'
          };
     })
;


let config = Encore.getWebpackConfig();
config.resolve.alias = {
    'assets': path.resolve(__dirname, './web/assets')
};


// export the final configuration
module.exports = config;
//module.exports = Encore.getWebpackConfig();

Thank you in advance !

[Lyrkan]

Hi @alex83130,

Could be related to #316 ? Maybe you could give a quick shot at the pending Webpack 4 PR (#324) to see if that fixes it?

[alex83130]

Thanks @Lyrkan for your answer.
The problem is that for my project I need a stable version of webpackencore.

So for now I keep separate my css of my Vue Single Component...

[alex83130]

Another problem, style in single component from lib in node_modules is also ignored. It's more problematic ...

Upgrate to Webpack 4 is the only way to correct the issue ?

[Lyrkan]

@alex83130 I can't reproduce the issue with a minimal project using Webpack 3: https://gist.github.com/Lyrkan/c4870460754671fc943411d390e87564

Does Webpack generate the CSS file that contains the scoped styles in your case?

[alex83130]

It's ok ! Webpack was generating well the css file with all scoped css (owners and node_modules) but I didn't include it in my index.html ....
All work now, thanks very much @Lyrkan !

[Lyrkan]

Glad to hear it :)

[avcheck24]

It's ok ! Webpack was generating well the css file with all scoped css (owners and node_modules) but I didn't include it in my index.html ....
All work now, thanks very much @Lyrkan !
Hey @alex83130 could you throw some light about this file which webpack creates with all scoped styles including which solved your problem.

[quadmachine]

It's ok ! Webpack was generating well the css file with all scoped css (owners and node_modules) but I didn't include it in my index.html ....
All work now, thanks very much @Lyrkan !
Hey @alex83130 could you throw some light about this file which webpack creates with all scoped styles including which solved your problem.

I solved the problem by adding

{{ encore_entry_link_tags('app') }} in my base twig. Then it started including the generated app.css

note that my entry point in webpack.conf is defined as .addEntry('app', './assets/js/app.js')