Question

对于使用Vuetify项目设置Symfony的项目，我找不到任何有用的信息（可能是因为我不是一位经验丰富的Web开发人员）。我缺少css-loader，无法弄清楚应如何设置。

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

const { VueLoaderPlugin } = require('vue-loader');

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

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

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/js/app.js')

    // 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()

    .addPlugin(new VueLoaderPlugin())

    .enableVueLoader()

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

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

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

这是非常基本的 webpack.congi.js

app.js

import '@babel/polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import router from './router'

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

我找到了如何用webpack设置vuetify的方法，但是我觉得这不适用于symfony项目。 webpack + css-loader

任何想法我该如何设置？

Answer 1

对于那些正在为同一问题而苦苦挣扎的人来说，解决方案很简单，但并不是那么明显。

base.html.twig 内，或者您的twig文件必须包含在内：

{% block stylesheets %}
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
{% endblock %}

否则symfony将无法加载css'sys

Answer 2

我的设置如下：

安装encore，请按照https://symfony.com/doc/current/frontend/encore/installation.html
我使用纱线，所以要安装纱线以安装依赖关系
安装vuetify-纱线添加vuetify
在您的应用程序js入口点中包含vuetify
也包括vuetify样式表（就像您一样）
最重要的是，您应该要求使用主css / scss或您使用的任何东西。就我而言，我有require（css的路径）..这样，您的css和vuetify css将一起编译

Answer 3

如果您尝试使用Vuetify v2.x进行此操作，而不是从外部CDN加载样式（请参见yerpy's answer），则也可以通过webpack加载样式。假设您已经创建了Symfony项目，请首先确保已安装symfony encore：

$ composer require encore

然后安装依赖项Vue和Vuetify：

$ npm i -S vue vuetify

然后安装dev依赖项：

$ npm i -D vue-loader vuetify-loader vue-template-compiler sass sass-loader fibers

然后在webpack.config.js中，您需要在文件顶部导入vuetify-loader并按以下方式配置Encore：

var Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .enableVueLoader() // <-- IMPORTANT: this loads Vue
    // NOTE: I put my Vue app in assets/vue which I think is non-standard
    //       but it allows me to structure my Vue app as I would in a non-Symfony app
    .addEntry('app', './assets/vue/main.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    // add VuetifyLoaderPlugin: THIS loads all of the Vuetify components
    .addPlugin(new VuetifyLoaderPlugin())
    // enables Sass/SCSS support
    .enableSassLoader(options => {
        options.implementation = require('sass')
        options.fiber = require('fibers')
    })
;

module.exports = Encore.getWebpackConfig();

注意，我不是Symfony开发人员，所以我不能说这是实现此目的的“最佳”方法。 Here's a repo with a working example，如果您需要查看其他文件/配置以使所有这些东西一起玩好。

Vuetify内部symfony项目

3 个答案: