のWebPACKのSASSローダーは、グローバル変数iがこのSASSディレクトリを持っている

Question

を提出認識しません。他のjsファイルがあります：

require('./some-module-sass-file'); 

//some-module-sass-file.scss

.container { 
    width: $base-container; 
} 

問題は、私はグローバルファイルVARS 内の変数とはそれらを認識していないいくつかのモジュール-SASSファイルや投げを持っていますエラー：

undefined variable $base-container 

Answer 1

あなたはすべての部分が独自にコンパイルされているため、これらの変数を使用して、部分ごとサスにvarsファイルをインポートする必要があります。特定のファイルをインポートしない限り、他のファイルを「知っている」ファイルはありません。

すべてのSassファイルにimportを入力する必要がない場合は、baggage-loaderを見ると自動的に追加されます。

Answer 2

短い答え：

https://github.com/shakacode/sass-resources-loader

長い答え：

SASS-リソース・ローダは、必要な各SASSファイル内の変数、ミックスインなどを使用することができます。

<!-- language: lang-css --> 

$main: #073288; 
$secondary: #F6A906; 

<!-- end snippet --> 

をそしていつものようにそれらを使用する：

だから、vars.scssであなたの変数を持つことができ

<!-- language: lang-css --> 

.my-component { 
    background-color: $main; 
    color: $secondary; 
} 

<!-- end snippet --> 

すべてを行う必要が

1. がインストールされsass-resources-loader：

   NPM --save-devのSASS-リソースローダ

2. をインストールおよび設定あなたはwebpack.config：

   { ローダーを： 'SASS-リソースローダ'、 オプション：{ リソース： './path/to/vars。SCSS' }、 }、

ここでは、どのようなエラーgithub

<!-- language: lang-js --> 

module: { 
    rules: [ 
    // Apply loader 
    { 
     test: /\.scss$/, 
     use: [ 
     'style-loader', 
     'css-loader', 
     'postcss-loader', 
     'sass-loader', 
     { 
      loader: 'sass-resources-loader', 
      options: { 
      resources: ['./path/to/vars.scss', './path/to/mixins.scss'] 
      }, 
     }, 
     ], 
    }, 
    ], 
} 

<!-- end snippet -->