CODEWITHSUNDEEP
symfonyvue.jswebpackwebpack-encore
dehiv
dehiv

Reputation: 31

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

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?

Upvotes: 3

Views: 1248

Answers (5)

Dennis de Best
Dennis de Best

Reputation: 1108

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]
        },
      },
    ]
  })

Upvotes: 0

Kevin Driessen
Kevin Driessen

Reputation: 366

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

Upvotes: 2

fuxinko
fuxinko

Reputation: 21

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";'
      }
    })
  });
});

Upvotes: 2

Lars Mertens
Lars Mertens

Reputation: 1439

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

Upvotes: 0

Tristan G
Tristan G

Reputation: 2535

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.

Upvotes: 0

Related Questions