webpack mit vue-loader und sass-loader kann .scss-Dateien nicht importieren

Question

Ich versuche einige Variablen in eine .vue-Komponente zu importieren, aber es funktioniert nicht, und ich vermute eine schlechte Konfiguration des Webpacks ...

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

ich sehe viele andere diese Art von Notwendigkeit haben, fragen sich, ob Du findest immer eine Lösung. Es ist schön in Vorlagen zu sass, aber ohne Variablen ist es ziemlich nutzlos ... (sicher, ich kann den absoluten Pfad setzen, es funktioniert aber das ist eine schlechte Praxis dachte ...)

Answer 1

Ich habe gerade das in Angriff genommen mein aktuelles Projekt, also hier ist der entsprechende Abschnitt meines Arbeits 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', 
         ], 
        }, 
       }, 
      ], 

die Lader werden vom Dateityp oder Sprach-Tag in der vue Datei eingegeben haben, dann ist die sprachspezifischen loader-Liste zugeordnet ist. Wenn Sie ausschließlich sass oder scss verwenden, können Sie den Standard für den anderen verwenden (oder ihn löschen).