Webpack-encore: .enableVueLoader() doesn't work style scoped

[matudelatower]

in my webpack.config.js:

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

var env = require('./env.json');

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')
    .setPublicPath(env.publicPath)

    // will create web/build/app.js and web/build/app.css
    .addEntry('app', './app/Resources/assets/js/main.js')
    .addEntry('common-js', './app/Resources/assets/js/common.js')

    .enableVueLoader()

    .addStyleEntry('global', './app/Resources/assets/css/global.scss')
    .addStyleEntry('common', './app/Resources/assets/css/common.scss')

    // allow sass/scss files to be processed
    .enableSassLoader()

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

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

    .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()
;

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

package.json

{
  "name": "hcd",
  "version": "1.0.0",
  "description": "Honorable Concejo Deliberante de la Ciudad de Posadas",
  "main": "webpack.config.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "dev-server": "./node_modules/.bin/encore dev-server",
    "dev": "./node_modules/.bin/encore dev",
    "watch": "./node_modules/.bin/encore dev --watch",
    "build": "./node_modules/.bin/encore production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hcdposadas/hcd.git"
  },
  "author": "Honorable Concejo Deliberante de la Ciudad de Posadas",
  "contributors": [
    {
      "name": "Matias Solis de la Torre",
      "email": "[email protected]"
    },
    {
      "name": "Raul Neis",
      "email": "[email protected]"
    }
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hcdposadas/hcd/issues"
  },
  "homepage": "https://github.com/hcdposadas/hcd#readme",
  "devDependencies": {
    "@symfony/webpack-encore": "^0.19.0",
    "bootstrap-sass": "^3.3.7",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "vue": "^2.5.13",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.13",
    "webpack-notifier": "^1.5.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "bootstrap": "^3.3.7",
    "express": "^4.16.2",
    "font-awesome": "^4.7.0",
    "ioredis": "^3.2.2",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9",
    "socket.io": "^2.0.4",
    "socket.io-client": "^2.0.4",
    "vue-moment": "^3.2.0"
  }
}

in my component :

<style scoped lang="css">
    .container{
        margin-top: 15rem;
    }
</style>

doesn't work, style do not render, i try without scoped, without lang, with lang="scss"

[matudelatower]

i forget it include app.css asset in my twig

[TheRatG]

@matudelatower
In my case it was
<link rel="stylesheet" href="{{ asset('build/js/frontend/main.css') }}">

[avcheck24]

@matudelatower @TheRatG I am facing the same issue could you please help me locate where and how all these scoped styles are getting formed

[matudelatower]

@avcheck24 In your layout_base.html.twig include all your assets files build in /dist path

check: https://github.com/matudelatower/UFRugby/blob/master/templates/base_public.html.twig

[TheRatG]

@matudelatower @TheRatG I am facing the same issue could you please help me locate where and how all these scoped styles are getting formed

It depends on your webpack setting, for example (web/build/app.css)

.setOutputPath('web/build/')
...
.addEntry('app', './app/Resources/assets/js/main.js')
...