webpack with vue-loader and sass-loader can't import .scss files

Question

I'm trying to import some variables into a .vue component but it won't work, and I suspect a bad configuration of webpack...

.vue

<style scoped lang="scss">
    @import "variables";
    ...

config.js

...
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'sass-loader': {
          data: '@import "variables";',
          includePaths: [
            // yes, I've tested different paths with no luck...
            '/src/scss',
            './src/scss',
            path.resolve(__dirname, '/src/scss'),
            path.resolve(__dirname, './src/scss')
          ]
        },
      },
    }
  },
  ...

I see many other have this kind of need, wonder if you ever find a solution. It is nice to have sass into templates, but without variables is pretty useless... (sure, I can just put the absolute path, it works but that's a bad practice thought...)

Answer 1

I just tackled this in my current project, so here's the relevant section of my working webpack config:

  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    esModule: true,
    loaders: {
      sass: [ 'vue-style-loader',
              'css-loader',
              {
                  loader: 'sass-loader',
                  options: {
                      indentedSyntax: true;
                      data: '@import "variables";',
                      includePaths: [
                          'src/styles',
                      ],
                  },
              },
            ],
      scss: [ 'vue-style-loader',
              'css-loader',
              {
                  loader: 'sass-loader',
                  options: {
                      data: '@import "variables";',
                      includePaths: [
                          'src/styles',
                      ],
                  },
              },
            ],

The loaders are keyed by the file type or language tag in the vue file, then the language specific loader list is assigned. If you're only using sass or scss exclusively, you can use the default for (or drop) the other.