Symfony + Vue - import _variables.scss in all Vue components using Webpack Encore

user_12967674 0
Viewed 851

I am using Symfony + Vue.js, and I would like to import my _variables.sccs file in all the vue components. I want to use the scss variables in the style blocks of all of my components

I know how to do it in a vue app created with vue-cli (using vue.config.js config file), but i've tried to replicate this in different ways in the webpack.config.js used by Encore... and there is no way to make it work.

This is my 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();

Any idea?

webpack-encore symfony vue.js webpack
5 Answers

This is how i get it working with Vue 3 and AdonisJS 5

// webpack.config.js

Encore.enableVueLoader(() => { }, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: false,
})

Encore.configureLoaderRule('scss', loaderRule => {
  loaderRule.oneOf.forEach(rule => {
    rule.use.forEach(loader => {
      if (loader.loader.indexOf('sass-loader') > -1) {
        loader.options.additionalData = '@import "./resources/css/_import-everywhere.scss";'
      }
    })
  });
});
user_148781170

fuxinko's answers works fine, but it'll give a warning:

WARNING Be careful when using Encore.configureLoaderRule(), this is a low-level method that can potentially break Encore and Webpack when not used carefully.

You should get the same result (without warning) by using using a callback in enableSassLoader:

    .enableSassLoader(options => {
        options.additionalData = '@import "./resources/css/_import-everywhere.scss";'
    })

Note that the semicolon is not allowed in sass files, so if you need both scss and sass compiled, things could get more difficult: I've added a possible solution for this to a similar question: https://stackoverflow.com/a/68914128/1370000

user_13700000

I'm also curious about this one. I found on the web the following piece of code that should be added into the Symfony Webpack's file : 

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

But in my case this doesn't work as options is empty in the callback function.

user_121580410

You can make this work by using sass-resources-loader. Install this loader first by using npm for example.

npm install sass-resources-loader

And than use the .configureLoaderRule method Webpack Encore ships with.

.configureLoaderRule('scss', (loaderRule) => {
    loaderRule.oneOf.forEach((rule) => {
        rule.use.push({
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // Change this to your _variables.scss path
                    path.resolve(__dirname, './assets/css/_variables.scss'),
                ]
            },
        })
    })
})

I've tried to make this work myself with LESS and it took me too much time to find out how it worked. Anyway for the people using LESS you can use a different loader like the: style-resources-loader

user_27909410

I have used this a couple of times. To get it to work I enable the vueLoader and add the vue-style-loader :


Encore
 //...
  .enableVueLoader()


  .addLoader({
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          data: `
              @import "./assets/scss/_variables.scss";
              @import "./assets/scss/_mixins.scss";
            `,
          includePaths: [__dirname]
        },
      },
    ]
  })
user_80905110
Related