symfony - Vuetify 在 symfony 项目中

Question

我找不到任何关于使用 Symfony 项目设置 Vuetify 有帮助的东西(可能是因为我不是经验丰富的网络开发人员)。我缺少一个 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/>'
});

我找到了如何使用 vuetify 设置 webpack 但我觉得它不适用于 symfony 项目。 webpack + css-loader

有什么办法可以设置吗？

Answer 1

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

$ composer require encore

然后安装依赖项 Vue 和 Vuetify:

$ npm i -S vue vuetify

然后安装开发依赖:

$ 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如果您需要查看其他必要的文件/配置以使所有这些东西一起发挥作用。