Symfony + Vue - импортировать _variables.s css во все Vue компоненты с помощью Webpack Encore - PullRequest
Новая
       22

Symfony + Vue - импортировать _variables.s css во все Vue компоненты с помощью Webpack Encore

1 голос
/ 26 февраля 2020

Я использую Symfony + Vue. js, и я хотел бы импортировать мой файл _variables.sccs во все компоненты vue. Я хочу использовать переменные s css в блоках стилей всех моих компонентов

Я знаю, как это сделать в приложении vue, созданном с помощью vue -cli (используя vue. config. js config file), но я попытался воспроизвести это различными способами в webpack.config. js, используемом Encore ... и нет способа заставить его работать.

Это мой файл webpack.config. js file: 

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

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

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

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    // enable Vue.js
    .enableVueLoader()

    .configureWatchOptions(function (watchOptions) {
        watchOptions.poll = 250;
    })
;

module.exports = Encore.getWebpackConfig();

Есть идеи?

1 Ответ

0 голосов
/ 23 марта 2020

Мне тоже интересно об этом. В Интернете я обнаружил следующий фрагмент кода, который должен быть добавлен в файл Symfony Webpack: 

.enableVueLoader(function(options) {
    options.loaders.scss.forEach(loader => {
        if(loader.loader === 'sass-loader') {
            loader.options = {
                sourceMap: true,
                data: `
                    @import "./assets/css/common/variables";
                `
            }
        }
    });
})

Но в моем случае это не работает, так как параметры пусты в функции обратного вызова.

...