vue-loaderとsass-loaderを使用したwebpackは.scssファイルをインポートできません

Question

一部の変数を.vueコンポーネントにインポートしようとしていますが、動作しません。

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

は、私は他の多くの必要性のこの種の、不思議場合があります見ますあなたは解決策を見つけることができます。テンプレートに嫌な思いをするのは良いことですが、変数を使用しないとかなり無駄になります...（確かに、絶対パスを入れても動作しますが、それは悪い練習です...）

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のみを排他的に使用している場合は、デフォルトのSassまたはScssを使用することができます。