0

我将Symfony4 (flex) 与 Webpack-encore 和 VueJs 一起使用。我创建了一个单一文件组件（ingredient-search.vue）：

<template>
    <article class="content">
        <section class="autogrid overlay">
            <form action="#" name="chooseIngredient" method="post" @submit="chooseIngredient">
                <label for="chooseIngredient_ingredient" class="hidden required">Ingredient</label>
                <select name="chooseIngredient[ingredient]" id="chooseIngredient_ingredient"></select>
                <div>
                    <button type="submit" id="chooseIngredient_chooseIngredient"
                            name="chooseIngredient[chooseIngredient]">Choose
                    </button>
                </div>
            </form>
        </section>
    </article>
</template>

<style lang="scss" scoped>
    .content {
        .overlay {
            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.6);
        }
    }
</style>

<script>
    export default {
        data () {
          return {};
        },
        methods: {
            /**
             *
             * @param e
             */
            chooseIngredient: (e) => {
                // Pour éviter de rafraîchir la page
                e.preventDefault();

                console.log('ok');
            }
        }
    }
</script>

我的模板和脚本工作，但没有应用任何样式。

这是我的 Webpack 配置：

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

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .addEntry('app', './assets/scripts/app.js')
    .addEntry('style', './assets/styles/style.scss')

    .enableSassLoader()
    .enableVueLoader()

    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    .enableBuildNotifications()

    .enablePostCssLoader()
    .createSharedEntry('vendor', [
        'knacss/css/knacss.css'
    ])
;

module.exports = Encore.getWebpackConfig();

我的package.json：

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.1",
    "autoprefixer": "^7.2.5",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.10",
    "sass-loader": "^6.0.6",
    "vue": "^2.5.13",
    "vue-loader": "^13.7.0",
    "vue-template-compiler": "^2.5.13",
    "webpack-notifier": "^1.5.1"
  },
  "dependencies": {
    "css-loader": "^0.28.9",
    "jquery": "^3.3.1",
    "knacss": "^7.0.1",
    "vuejs": "^3.0.1"
  }
}

我的 Twig 代码和我的组件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{% block title %}Welcome!{% endblock %}</title>

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('build/vendor.css') }}"/>
        <link rel="stylesheet" href="{{ asset('build/style.css') }}"/>
    {% endblock %}
</head>
<body class="pal">
<div id="app">

    <ingredient-search></ingredient-search>

</div>
{% block javascripts %}
    <script src="{{ asset('build/manifest.js') }}"></script>
    <script src="{{ asset('build/vendor.js') }}"></script>
    <script src="{{ asset('build/style.js') }}"></script>
    <script src="{{ asset('build/app.js') }}"></script>
{% endblock %}
</body>
</html>

命令yarn run encore dev (--watch)或yarn run encore dev-server (--hot)正常工作。浏览器控制台没有错误消息，我的组件工作但没有样式。

4

1 回答 1

1

嗯，好的，我忘记从 Twig 文件链接 CSS 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{% block title %}Welcome!{% endblock %}</title>

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('build/vendor.css') }}"/>
        <link rel="stylesheet" href="{{ asset('build/style.css') }}"/>
        <link rel="stylesheet" href="{{ asset('build/app.css') }}"/>
    {% endblock %}
</head>
<body class="pal">
<div id="app">

    <ingredient-search></ingredient-search>

</div>
{% block javascripts %}
    <script src="{{ asset('build/manifest.js') }}"></script>
    <script src="{{ asset('build/vendor.js') }}"></script>
    <script src="{{ asset('build/style.js') }}"></script>
    <script src="{{ asset('build/app.js') }}"></script>
{% endblock %}
</body>
</html>
于 2018-01-27T14:51:41.950 回答