webpack - 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

我刚刚在我当前的项目中解决了这个问题，所以这是我工作的 webpack 配置的相关部分：

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

加载器由 vue 文件中的文件类型或语言标签键入，然后分配特定语言的加载器列表。如果您只使用 sass 或 scss，则可以使用（或删除）另一个的默认值。