Как применить стиль к компоненту VueJS с маркером стиля

Я работаю с Symfony 4 и VueJS 2, все работает отлично, за исключением того, что я не могу применить CSS в своем компоненте, не знаю почему. Я не получаю никаких ошибок или чего-то еще. Это может быть из моего webpack.config.js, но я не уверен.

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

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
   .setPublicPath('/build')
   .cleanupOutputBeforeBuild()
   .enableSourceMaps(!Encore.isProduction())
   // uncomment to create hapshed filenames (e.g. app.abc123.css)
   // .enableVersioning(Encore.isProduction())


   // Provide global style
   .addStyleEntry('css/index', './assets/css/index.scss')
   .addStyleEntry('css/client', './assets/css/client.scss')

   .addEntry('js/index', './assets/js/index.js')

   .addEntry('js/client/index', './assets/js/client/index.js')
   .addEntry('js/client/form', './assets/js/client/form.js')

   .addEntry('js/manager/form', './assets/js/manager/form.js')

   .addEntry('js/serviceProvider/form', './assets/js/serviceProvider/form.js')
   .enableSassLoader()

   // Use VueJS
   .enableVueLoader()
   .enableSassLoader()
   .splitEntryChunks();
module.exports = Encore.getWebpackConfig();

Компонент:

<template>
    <div>
        <div class = "row search-bar justify-content-start">
            <h6 id = "test" class = "col-sm-12">Recherche</h6>
            <filtering v-for = "(filter, property) in search"
                   v-on:change = "updateFilter"w
                   :type = "filter.type"
                   :placeholder = "filter.placeholder"
                   :key = "property"
                   :options = "filter.default"
                   :property = "property">
            </filtering>
        </div>
        <table class = "table">
            <tr :key = "data.id" v-for = "data in filteredData">
                <slot v-bind:data = "data">
                    <td>{{ data.id }}</td>
                </slot>
            </tr>
        </table>
    </div>
</template>
<style>
    .search-bar{
        background-color:red
    }
 </style>
 <script>
 ...
 </script>

Например, здесь, в моем компоненте, правило background-color:red не применяется.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Symfony Station Communiqué - 17 февраля 2023 г
Symfony Station Communiqué - 17 февраля 2023 г
Это коммюнике первоначально появилось на Symfony Station , вашем источнике передовых новостей Symfony, PHP и кибербезопасности.
Управление ответами api для исключений на Symfony с помощью KernelEvents
Управление ответами api для исключений на Symfony с помощью KernelEvents
Много раз при создании api нам нужно возвращать клиентам разные ответы в зависимости от возникшего исключения.
0
0
88
1

Ответы 1

Насколько я знаю, после того, как вы набрали код, вы должны собрать его заново. Попробуй это,

node_modules/.bin/encore dev

Другие вопросы по теме