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

Viewed 1483

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...)

1 Answers
Related