Question

我正在使用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不适用

Answer 1

据我所知，键入代码后，您应该重新构建。试试这个，

node_modules/.bin/encore dev

如何使用样式标记将样式应用于VueJS组件

1 个答案: